Unocss Preset Shadcn

Overview:

The shadcn-ui unocss preset is a project created for fans of unocss and shadcn-ui who want to take advantage of the speed and convenience that unocss brings. This project combines the two to enhance the development experience by leveraging the benefits of both libraries.

Features:

• Integration: Combines unocss and shadcn-ui for enhanced development efficiency.
• Quick Start: Easy setup process for using the unocss-preset-shadcn.
• Customization: Allows users to select and copy theme colors from shadcn-ui for customization.
• Dependencies: Provides a list of dependencies and instructions for installing necessary packages for shadcn-ui and shadcn-vue projects.

Installation:

1. Install unocss.
2. Create a uno.config.ts file and copy preset.shadcn.ts into your project.
3. Add the copied file into uno.config.ts.
4. Copy the theme colors from shadcn-ui and add them into the preset.shadcn.ts.
5. For shadcn-vue projects, make additional configurations in uno.config.ts.
6. Install necessary dependencies - pnpm add lucide-react class-variance-authority clsx tailwind-merge.
7. Copy utils.ts into your project at src/lib.
8. For using shadcn-cli to add components, create components.json in your project root and modify as needed. Then run pnpm dlx shadcn-ui@latest add [component].

Summary:

The shadcn-ui unocss preset provides an easy and efficient way for developers to integrate shadcn-ui with unocss, benefiting from the speed and convenience that unocss offers. By following the installation guide and customizing with theme colors, developers can enhance their projects with this preset. Additionally, the project provides clear instructions on dependencies and setup for both shadcn-ui and shadcn-vue projects.