Unocss Preset Shadcn

Effortlessly Style shadcn-ui with UnoCSS using unocss-preset-shadcn

unocss-preset-shadcn offers a seamless bridge for developers wanting to combine the popular shadcn-ui or shadcn-vue component libraries with the lightning-fast UnoCSS engine. This preset allows you to leverage UnoCSS's on-demand, utility-first approach to style your shadcn components, enhancing development speed and maintaining a clean codebase. It's designed for those who appreciate the aesthetics of shadcn and the performance benefits of UnoCSS, providing a straightforward integration path.

Features:

• UnoCSS Preset: Integrates shadcn-ui/vue styling directly into the UnoCSS engine.
• shadcn-ui Compatibility: Fully supports components from the React-based shadcn-ui library.
• shadcn-vue Compatibility: Fully supports components from the Vue-based shadcn-vue library.
• Customizable Theming: Allows easy adoption of shadcn-ui themes by copying color variables into the preset.
• Animation Shortcuts: Provides necessary CSS animation shortcuts (e.g., 'animate-accordion-up') for shadcn-vue.
• Simplified Configuration: Includes clear setup instructions for uno.config.ts and components.json.
• Dependency Guidance: Lists required peer dependencies like lucide-react, clsx, and tailwind-merge.
• UnoCSS Versioning Note: Alerts to syntax changes in UnoCSS versions, like color variable formatting.
• Utility Functions: Recommends a utils.ts file for common helper functions used with shadcn components.
• shadcn-cli Support: Facilitates component addition via shadcn-ui@latest add when components.json is configured.

Summary:

unocss-preset-shadcn is a specialized UnoCSS preset that allows developers to efficiently style shadcn-ui and shadcn-vue components. By integrating shadcn's design principles with UnoCSS's performance, it streamlines UI development for both React and Vue projects. The preset simplifies theme application, handles animation utilities, and provides clear setup instructions, making it an excellent choice for building modern, fast, and visually consistent web applications with your favorite tools.