Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexy-os/vue-shadcn-starter
A revolutionary approach to building modern websites using Vue 3, Shadcn UI, and Tailwind CSS
https://github.com/alexy-os/vue-shadcn-starter
shadcn shadcn-ui shadcn-vue shadcnui vite-starter vite-template-vue vitejs vue-components vue-template vuejs
Last synced: about 2 months ago
JSON representation
A revolutionary approach to building modern websites using Vue 3, Shadcn UI, and Tailwind CSS
- Host: GitHub
- URL: https://github.com/alexy-os/vue-shadcn-starter
- Owner: alexy-os
- License: mit
- Created: 2024-11-16T15:53:13.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-16T16:14:53.000Z (about 2 months ago)
- Last Synced: 2024-11-16T17:17:54.115Z (about 2 months ago)
- Topics: shadcn, shadcn-ui, shadcn-vue, shadcnui, vite-starter, vite-template-vue, vitejs, vue-components, vue-template, vuejs
- Language: Vue
- Homepage: https://shadcn-landy.vercel.app/
- Size: 88.9 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Shadcn UI Starter
A revolutionary approach to building modern websites using Vite + Vue 3 Shadcn UI in a BunJS environment. This starter kit turns traditional admin panel-centric ui/shadcn components into a versatile solution for creating stunning landing pages, multi-page applications, and reusable UI blocks.
## 🌟 Key Features
- **Advanced Design System**: Built on top of shadcn-vue with extended functionality for websites
- **BEM + Tailwind Methodology**: Centralized styling configuration with BEM naming convention
- **Dark Mode Support**: Seamless theme switching with persistent state
- **JAMstack Ready**: Content management through JSON files
- **Type-Safe**: Full TypeScript support
- **Performance Optimized**: Powered by Bun.js and Vite
## 🚀 Quick Start
```bash
# Clone the repository
git clone https://github.com/alexy-os/vue-shadcn-starter
# Install dependencies
bun install
# Start development server
bun dev
```
## 🎨 Styling Architecture
The project introduces a unique styling approach that combines BEM methodology with Tailwind CSS, managed through a centralized configuration:
```typescript
// styles.config.ts example
export const styles = {
'block': 'tailwind-classes',
'block__element': 'tailwind-classes',
'block__element--modifier': 'tailwind-classes'
}
```
### Usage in Components
```vue
{{ content.title }}
```
## 📄 Content Management
The project uses a JSON-based content management system, making it perfect for JAMstack architectures:
```json
{
"hero": {
"title": "Your Title",
"description": "Your Description"
}
}
```
## 🛠️ 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/)
## 📦 Project Structure
```
src/
├── components/
│ └── ui/ # Shadcn components
├── config/
│ └── styles.config.ts # Centralized styling
├── utils/
│ └── styles.ts # Style utilities
├── assets/
│ └── index.css # Global styles
└── App.vue # Main application
```
## 🎯 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/).