Gathering detailed insights and metrics for @namesmt/unocss-preset-shadcn
Gathering detailed insights and metrics for @namesmt/unocss-preset-shadcn
Gathering detailed insights and metrics for @namesmt/unocss-preset-shadcn
Gathering detailed insights and metrics for @namesmt/unocss-preset-shadcn
npm install @namesmt/unocss-preset-shadcn
Typescript
Module System
Node Version
NPM Version
50
Supply Chain
33.7
Quality
74.1
Maintenance
100
Vulnerability
97.6
License
Total Downloads
113
Last Day
1
Last Week
5
Last Month
12
Last Year
113
Minified
Minified + Gzipped
Latest Version
0.2.4
Package Id
@namesmt/unocss-preset-shadcn@0.2.4
Unpacked Size
143.57 kB
Size
13.96 kB
File Count
8
NPM Version
10.5.2
Node Version
20.13.1
Published on
May 10, 2024
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
66.7%
5
Compared to previous week
Last Month
300%
12
Compared to previous month
Last Year
0%
113
Compared to previous year
Use shadcn/ui or shadcn-vue or shadcn-svelte with UnoCSS
You can easily start a new project without manually setting up the project.
Follow the official guide to set up shadcn/ui, shadcn-vue, or shadcn-svelte. Replace the step to set up Tailwind CSS with UnoCSS.
Then install unocss-preset-shadcn
and unocss-preset-animations
, and update your unocss.config.ts
:
1ni -D unocss-preset-animations unocss-preset-shadcn
1// unocss.config.ts 2import { defineConfig, presetUno } from "unocss"; 3import presetAnimations from "unocss-preset-animations"; 4import { presetShadcn } from "unocss-preset-shadcn"; 5 6export default defineConfig({ 7 presets: [ 8 presetUno(), 9 presetAnimations(), 10 presetShadcn({ 11 color: "red", 12 }), 13 ], 14 // By default, `.ts` and `.js` files are NOT extracted. 15 // If you want to extract them, use the following configuration. 16 // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte. 17 content: { 18 pipeline: { 19 include: [ 20 // the default 21 /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, 22 // include js/ts files 23 "src/**/*.{js,ts}", 24 ], 25 }, 26 }, 27});
[!IMPORTANT] Do not run
npx shadcn-ui@latest init
ornpx shadcn-vue@latest init
ornpx shadcn-svelte@latest init
to initialize your project.
ni lucide-react class-variance-authority clsx tailwind-merge
ni lucide-vue-next radix-vue class-variance-authority clsx tailwind-merge
for shadcn-vue.ni lucide-svelte tailwind-variants clsx tailwind-merge
for shadcn-svelte.utils.ts
into your project at src/lib
components.json
in your project root and modify as needednpx shadcn-ui@latest add button
npx shadcn-vue@latest add button
for shadcn-vue.npx shadcn-svelte@latest add button
for shadcn-svelte.[!WARNING] If you encounter problems adjusting animation property, this may be because tailwind-animate has duplicate rules about animation and transition. You can refer to Migration Guide from Animations Preset for UnoCSS to solve this problem.
1import { clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3
4import type { ClassValue } from "clsx";
5
6export function cn(...inputs: ClassValue[]) {
7 return twMerge(clsx(inputs));
8}
React + shadcn-ui
1{ 2 "$schema": "https://ui.shadcn.com/schema.json", 3 "style": "default", 4 "tailwind": { 5 "config": "tailwind.config.js", 6 "css": "styles/global.css", 7 "baseColor": "neutral", 8 "cssVariables": true, 9 "prefix": "" 10 }, 11 "rsc": false, 12 "tsx": true, 13 "aliases": { 14 "utils": "~/lib/utils", 15 "components": "~/components", 16 "ui": "~/components/ui" 17 } 18}
Vue + shadcn-vue
1{ 2 "style": "default", 3 "typescript": true, 4 "tailwind": { 5 "config": "tailwind.config.js", 6 "css": "src/assets/index.css", 7 "baseColor": "neutral", 8 "cssVariables": true 9 }, 10 "framework": "vite", 11 "aliases": { 12 "components": "@/components", 13 "utils": "@/lib/utils" 14 } 15}
Svelte + shadcn-svelte
1{ 2 "$schema": "https://shadcn-svelte.com/schema.json", 3 "style": "default", 4 "tailwind": { 5 "config": "tailwind.config.js", 6 "css": "src/app.pcss", 7 "baseColor": "neutral" 8 }, 9 "aliases": { 10 "components": "$lib/components", 11 "utils": "$lib/utils" 12 } 13}
Preview the demo.
If you want to use a dynamic theme, you can pass an array of theme objects to presetShadcn
:
1import { defineConfig, presetUno, UserConfig } from "unocss"; 2import presetAnimations from "unocss-preset-animations"; 3import { builtinColors, presetShadcn } from "unocss-preset-shadcn"; 4 5export default defineConfig({ 6 presets: [ 7 presetUno(), 8 presetAnimations(), 9 presetShadcn(builtinColors.map((c) => ({ color: c }))), 10 ], 11});
Add a theme sync script to your index.html. To dynamically change the theme, you can create a theme switch component.
No vulnerabilities found.
No security vulnerabilities found.