https://github.com/alexy-os/vue-shadcn-starter
Shadcn UIKit - A revolutionary approach to building modern websites and landing pages using Vite + Vue 3 Shadcn UI in a speedy BunJS environment. Page Speed: 100%. See:
https://github.com/alexy-os/vue-shadcn-starter
shadcn shadcn-ui shadcn-ui-boilerplate shadcn-ui-starter shadcn-vue shadcnui uikit-components vite-starter vite-template-vue vitejs vue-components vue-template vue-uikit vuejs
Last synced: about 2 months ago
JSON representation
Shadcn UIKit - A revolutionary approach to building modern websites and landing pages using Vite + Vue 3 Shadcn UI in a speedy BunJS environment. Page Speed: 100%. See:
- Host: GitHub
- URL: https://github.com/alexy-os/vue-shadcn-starter
- Owner: alexy-os
- License: mit
- Created: 2024-11-16T15:53:13.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-12-03T14:39:55.000Z (7 months ago)
- Last Synced: 2025-05-07T10:02:27.437Z (about 2 months ago)
- Topics: shadcn, shadcn-ui, shadcn-ui-boilerplate, shadcn-ui-starter, shadcn-vue, shadcnui, uikit-components, vite-starter, vite-template-vue, vitejs, vue-components, vue-template, vue-uikit, vuejs
- Language: Vue
- Homepage: https://vue-uikit-shadcn.vercel.app/
- Size: 771 KB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Shadcn UIKit Starter
A modern approach to building websites using Vue 3 + Shadcn UI in a BunJS environment. This starter kit provides a robust foundation for creating landing pages, multi-page applications, and reusable UI components with a utility-first CSS approach.
## 📦 NEW! Section Collector
This version adds an experimental feature to add sections to the builder.
Click on the drop down menu in the top right corner. Click `Get UI Blocks` and add the blocks you like to the site-wide collection. Then click `Go to BuildY` to go into the builder and see the blocks ready to build pages.
If you want to continue browsing the site without the collector functionality, just click: `Default State`.
## Page speed Google Lighthouse score 100%
[Google Lighthouse score](https://pagespeed.web.dev/analysis/https-vue-uikit-shadcn-vercel-app/b1ozhxmmsz?form_factor=desktop)
## 🚀 Getting Started
### Prerequisites
- [Bun](https://bun.sh/) >= 1.0.0
- Node.js >= 18.0.0
```bash
# Install Bun
curl -fsSL https://bun.sh/install | bash
# Clone and Setup
git clone https://github.com/alexy-os/vue-shadcn-starter
cd vue-shadcn-starter
bun install
bun dev
```
## 🎨 Component Development
### CVA (class-variance-authority) Approach
We use CVA for type-safe component variants. Here's how to create a new component:
```typescript
// components/ui/button/button.ts
import { cva } from 'class-variance-authority'
export const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8'
}
},
defaultVariants: {
variant: 'default',
size: 'default'
}
}
)
```
### Component Implementation
```vue
import { computed } from 'vue'
import { buttonVariants } from './button'
import type { ButtonVariants } from './button.types'
const props = defineProps<ButtonVariants>()
const classes = computed(() =>
buttonVariants({ variant: props.variant, size: props.size })
)
```
## 🛠️ Tech Stack
- [Vue 3.5+](https://vuejs.org/)
- [Vite](https://vitejs.dev/)
- [Bun.js](https://bun.sh/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [shadcn-vue](https://github.com/unovue/shadcn-vue)
- [Radix Vue](https://www.radix-vue.com/)
- [class-variance-authority (CVA)](https://github.com/joe-bell/class-variance-authority)
## 📦 Project Structure
```
src/
├── components/
│ └── ui/ # Shadcn components
│ └── button/ # Example component structure
│ ├── button.ts # CVA variants
│ ├── button.vue # Component implementation
│ └── button.types.ts # TypeScript interfaces
├── lib/
│ └── utils.ts # Utility functions
├── styles/
│ └── globals.css # Global styles
└── App.vue # Main application
```
## 🔧 Development Guidelines
1. **Component Creation**:
- Place new components in `src/components/ui/`
- Use CVA for variant management
- Create separate files for types and variants
- Implement proper TypeScript interfaces
2. **Styling**:
- Follow utility-first approach with Tailwind CSS
- Use CVA for managing component variants
- Maintain dark mode compatibility
3. **Type Safety**:
- Ensure all components are properly typed
- Use TypeScript strict mode
- Leverage Vue 3.5+ type inference
## 🎯 Use Cases
- Landing Pages
- Marketing Websites
- Multi-page Applications
- Component Libraries
- Design Systems
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📝 License
MIT License - see the [MIT](LICENSE) file for details.
---
**Note**: This is an early preview of a larger ecosystem being developed for creating flexible, reusable UI components with shadcn-vue. Stay tuned for more blocks and components!
For more information, visit [shadcn-vue documentation](https://www.shadcn-vue.com/).