Shadcn-Studio Inspirations (Vue 3)

Overview

This skill contains reference implementations of 600+ complex component patterns originally designed in React, translated here into Vue 3 <script setup> SFC formats.

How to Use This Skill

When you (the AI) determine that a complex component design or full-page layout belongs to one of the categories below, follow these steps:

1. Load Reference Material: Open the specific reference markdown file (e.g., references/data-table.md) linked below to explore different variations and inspirations for that component. Crucially, read the **Best use case:** description listed under each ### variant.vue heading to find the component sample that best matches the user's specific request. If no single variant matches perfectly, draw inspiration and synthesize approaches from multiple relevant samples.
2. Install Missing Base Components: If the project uses shadcn-vue and lacks the base component, install it first using the CLI:

   npx shadcn-vue@latest add <component-name>
   

3. Handle Dependencies: Ensure necessary icons are installed (e.g., npm install lucide-vue-next).
4. Implement: Adapt the chosen reference design to fit the specific requirements of the user's project, ensuring valid Vue 3 <script setup> syntax and proper dependency imports (e.g., @/components/ui/...).

Note: Do not load all references at once. Use progressive disclosure: only load the specific component markdown files you need for the current task!

Component Categories Available

• Accordion
• Alert
• Avatar
• Badge
• Blocks
• Breadcrumb
• Button
• Button Group
• Calendar
• Card
• Checkbox
• Collapsible
• Combobox
• Data Table
• Date Picker
• Dialog
• Dropdown Menu
• Form
• Input
• Input Mask
• Input OTP
• Pagination
• Popover
• Radio Group
• Select
• Sheet
• Sonner
• Switch
• Table
• Tabs
• Textarea
• Tooltip