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

🚀 Getting Started

Prerequisites

• Bun >= 1.0.0
• Node.js >= 18.0.0

# 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:

// 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

<!-- components/ui/button/button.vue -->
<script setup lang="ts">
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 })
)
</script>
 
<template>
  <button :class="classes">
    <slot />
  </button>
</template>

🛠️ Tech Stack

• Vue 3.5+
• Vite
• Bun.js
• TypeScript
• Tailwind CSS
• shadcn-vue
• Radix Vue
• class-variance-authority (CVA)

📦 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 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.