Unocss Preset Shadcn

Integrate shadcn/ui with UnoCSS: The unocss-preset-shadcn

The unocss-preset-shadcn is a dedicated UnoCSS preset that facilitates the use of popular UI collections like shadcn/ui (React), shadcn-vue, shadcn-svelte, and SolidUI within UnoCSS-powered projects. It simplifies the integration process, allowing developers to leverage the utility-first approach of UnoCSS while incorporating the styling conventions and components of these libraries. This preset emphasizes easy theme customization, including support for dynamic themes, enhancing your development workflow for building modern user interfaces.

Features:

• UnoCSS Integration: Seamlessly use shadcn/ui, shadcn-vue, shadcn-svelte, and SolidUI components within an UnoCSS environment.
• Theme Customization: Easily customize themes, including base colors and CSS variables to match your design system.
• Dynamic Theming: Supports runtime theme switching, allowing users to select from multiple predefined or custom color schemes.
• Multi-Framework Support: Compatible with React (via shadcn/ui), Vue (via shadcn-vue), Svelte (via shadcn-svelte), and SolidJS (via SolidUI).
• Animation Integration: Designed to work with unocss-preset-animations for applying CSS animations.
• Dark Mode Selector: Offers a configurable darkSelector option, particularly useful for libraries like SolidUI.
• Content Extraction Guidance: Provides configuration for UnoCSS's content pipeline to include JavaScript/TypeScript files, necessary for some UI libraries.
• cn Utility Provided: Includes a standard cn utility function (using clsx and tailwind-merge) for conditional class name management.
• Configuration Templates: Offers example components.json (for React, Vue, Svelte) and ui.config.json (for SolidUI) to expedite project setup.
• CLI Workaround: Suggests using an empty tailwind.config.js to ensure compatibility with shadcn-like CLI tools.
• Component Library Specific Options: Allows for specific configurations, such as setting componentLibrary: "reka".

Summary:

unocss-preset-shadcn is an UnoCSS preset that bridges shadcn/ui (and its Vue, Svelte, SolidJS counterparts) with the UnoCSS framework. It enables developers to utilize shadcn's components and theming system within an UnoCSS project, offering robust theme customization, including dynamic themes, and providing necessary configurations for a smooth integration. This preset is ideal for developers wanting to combine shadcn's UI elements with UnoCSS's utility-first efficiency and performance.