shadcn-vue-skilld
starsforks
How to install shadcn-vue-skilld?
skilld-dev/vue-ecosystem-skills/shadcn-vue-skilld
$npx -y skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilldAdd components to your apps. ALWAYS use when writing code importing \"shadcn-vue\". Consult for debugging, best practices, or modifying shadcn-vue, shadcn vue.
SKILL.md
| 1 | # unovue/shadcn-vue `shadcn-vue@2.6.2` |
| 2 | **Tags:** radix: 0.11.4, latest: 2.6.2 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - BREAKING: `Separator` label props removed — labels in `Separator` are no longer supported in Tailwind v3 configurations since v2.2.0 [source](./references/releases/v2.2.0.md) |
| 10 | |
| 11 | - BREAKING: `vue-sonner` v2 update — requires manual update of `Toaster` component for compatibility with the latest version [source](./references/releases/v2.2.0.md) |
| 12 | |
| 13 | - BREAKING: HSL colors converted to OKLCH — default color space changed to OKLCH in v2.0.0, affecting custom CSS variable logic [source](./references/docs/.tailwind-v4.md) |
| 14 | |
| 15 | - BREAKING: `NavigationMenuLink` state change — now uses `data-active` instead of previous state indicators to match `reka-ui` [source](./references/releases/v2.4.0.md) |
| 16 | |
| 17 | - BREAKING: `Chart` `showGradient` prop — corrected typo in prop name from `showGradiant` to `showGradient` in v2.3.0 [source](./references/releases/v2.3.0.md) |
| 18 | |
| 19 | - DEPRECATED: `toast` component — officially deprecated in favor of `sonner`; current `toast` implementations should be migrated [source](./references/docs/.tailwind-v4.md) |
| 20 | |
| 21 | - DEPRECATED: `default` style — phased out in v2.0.0; new projects are initialized with `new-york` by default [source](./references/docs/.tailwind-v4.md) |
| 22 | |
| 23 | - NEW: Tailwind v4 support — introduces full integration with the Tailwind v4 engine and `@theme` directive [source](./references/releases/v2.0.0.md) |
| 24 | |
| 25 | - NEW: `NativeSelect` `modelValue` — provides native `v-model` support for the `NativeSelect` component [source](./references/releases/v2.4.0.md) |
| 26 | |
| 27 | - NEW: `Kbd` component — keyboard key display component for shortcuts and UI documentation [source](./references/releases/v2.3.0.md) |
| 28 | |
| 29 | - NEW: `Button-group` component — new layout component specifically for grouping related button actions [source](./references/releases/v2.3.0.md) |
| 30 | |
| 31 | - NEW: `Spinner` component — added dedicated loading spinner component to the registry [source](./references/releases/v2.3.0.md) |
| 32 | |
| 33 | - NEW: `PinInput` generic types — enhanced type safety for `PinInput` allowing custom value types [source](./references/releases/v2.3.0.md) |
| 34 | |
| 35 | - NEW: `data-slot` attributes — added to all primitives to simplify granular styling in complex components [source](./references/docs/.tailwind-v4.md) |
| 36 | |
| 37 | **Also changed:** `Stepper` slot props binding fix · `Sidebar` cookie state · `size-*` utility support · `phosphor` and `tabler` icon support |
| 38 | |
| 39 | ## Best Practices |
| 40 | |
| 41 | - Prefer CSS variables over utility classes for theming to enable dynamic runtime adjustments and easier maintenance of complex color schemes [source](./references/docs/04.theming.md) |
| 42 | |
| 43 | - Omit the `background` suffix when using variables for background colors in utility classes; for example, `bg-primary` automatically maps to the `--primary` variable [source](./references/docs/04.theming.md) |
| 44 | |
| 45 | - Build sidebars by composing sub-components (`SidebarProvider`, `SidebarContent`, `SidebarGroup`, etc.) rather than a single monolithic component to maintain flexibility and customization [source](./references/docs/components/sidebar.md) |
| 46 | |
| 47 | - Avoid the legacy `Form` component; use `VeeValidate` or `TanStack Form` integrations for more robust, actively maintained form handling and validation patterns [source](./references/docs/_INDEX.md) |
| 48 | |
| 49 | - Utilize the `valueUpdater` helper when managing TanStack Table state in Vue to correctly handle both direct value assignments and functional state transformations [source](./references/docs/components/data-table.md) |
| 50 | |
| 51 | ```ts |
| 52 | export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) { |
| 53 | ref.value = typeof updaterOrValue === 'function' |
| 54 | ? updaterOrValue(ref.value) |
| 55 | : updaterOrValue |
| 56 | } |
| 57 | ``` |
| 58 | |
| 59 | - Enable automatic sidebar state persistence across page reloads by providing a `storageKey` prop to the `SidebarProvider` component [source](./references/docs/components/sidebar.md) |
| 60 | |
| 61 | - Leverage the default `cmd+b` or `ctrl+b` keyboard shortcuts provided by `SidebarProvider` to toggle sidebar visibility without manual event listeners [source](./references/docs/components/sidebar.md) |
| 62 | |
| 63 | - Treat the code in `Sidebar*.vue` (and other added UI components) as your own project code; you are explicitly encouraged to modify the source to suit specific design needs [source](./references/docs/components/sidebar.md) |
| 64 | |
| 65 | - Build custom data tables from headless primitives and the basic `<Table />` component instead of looking for a pre-built, configuration-heavy "DataTable" component [source](./references/docs/components/data-table.md) |
| 66 | |
| 67 | - (experimental) Use the `buil |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
