{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"image","attrs":{"src":"https://r2.owlblog.org/shadcn.jpg","alt":"shadcn.jpg","title":"shadcn.jpg","width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"새로운 프로젝트를 시작할때마다 항상 쓰이는 Button, Input, Switch,Modal 등 이런 아주 기본적인 요소들을 항상 계속해서 만들어야 하는게 너무 귀찮았습니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그래서 Component Ui를 사용하게 되었고, 사용하다보니 디자인의 변화, UseCase, 새로운 기능을 추가하거나 하는 등의 수 많은 이유로 수정을 해야합니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"하지만, Component UI는 편하고 좋지만 커스텀이 너무 힘들다는 단점이 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"문서를 뒤져가며 커스텀을 시도해도 안되면 마지막에야 컴포넌트의 CSS를 건드려 처리하거나 하는 일이 발생 합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"예를들어 input의 높이를 조정하고 싶으면 단순히 input의 height를 수정한다고 되는 것이 아니고, 그 안에 있는 모든것들의 높이나 패딩, 글자 크기, css 변수까지 수정해줘야 하니 매우 피곤했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"'차라리 컴포넌트를 새로 만들어야 하나?' 싶다가도 수십개의 컴포넌트를 만들고, 그 기간이 얼마나 걸릴지 상상이 가지않아 쉽사리 엄두를 내지 못하고 있었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그러다 Headelss Ui를 발견했고, 프로젝트가 끝나고 시간이 생겨 이렇게 블로그에 적용해보게 되었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Headless Ui"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"제목은 Shadcn/ui 인데 왜 Headless Ui를 자꾸 얘기하냐구요? "},{"type":"text","marks":[{"type":"bold"}],"text":" "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Shadcn/ui는 Headless UI인 Radix UI와 tailwind css를 기반으로 만들어졌기 때문입니다 ."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Headless UI는 디자인과 기능을 분리해 각각 독립적으로 개발하는 Headess design system을 사용하여 만든 라이브러리 입니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그 중 Radix UI는 Headless UI 라이브러리 중 하나이며, 여러 라이브러리 중 Radix ui가 가장 생태계가 풍부하고, 최신 접근성을 지원한다고 합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Shadcn/Ui"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"드디어 Shadcn/ui의 얘기를 할 수 있게 되었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Shadcn/ui는 Vercel에서 만들었으며, Radix Ui를 기반으로 tailwind css를 적용한 재사용 가능한 컴포넌트 모음 입니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"공식 문서에 "},{"type":"text","marks":[{"type":"italic"}],"text":"NOT a componant library, but collection of the re-usable components"},{"type":"text","text":"라 명시되어 있습니다."}]},{"type":"heading","attrs":{"textAlign":"left","level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Shadcn Ui - Introduction - "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://ui.shadcn.com/docs","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}}],"text":"https://"},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://ui.shadcn.com/docs","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}}],"text":"ui.shadcn.com/docs"},{"type":"text","text":" "}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"라이브러리가 아니고, 재사용이 가능한 컴포넌트 모음이라 합니다. 그렇기 때문에 필요한 컴포넌트만 내 프로젝트로 복사해와서 자유롭게 수정할 수 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"필요한 부분만 가져오기 때문에 components ui에 비해 가볍습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"또한, Headless Ui가 디자인이 아예 없이 기능만 정의된 컴포넌트들 처럼 보이나 기본적인 디자인도 함께 제공합니다. 하지만 Components Ui처럼 수정이 어렵거나 하지는 않습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"ts파일에 cva를 통해 variation을 수정하거나, txMerge와 clsx로 class를 넘겨 손 쉽게 수정이 가능합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Shadcn/vue"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이제 Nuxt3에 적용해보겠습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"shadcn/ui는 react 기반이기 때문에 우리는 shadcn/vue를 사용해야합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그리고, shadcn/vue는 공식이 아닌, 커뮤니티 주도로 만들어졌습니다. 염두 해주세요."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"An unofficial, community-led "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://vuejs.org/","target":"_blank","rel":"noreferrer","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}},{"type":"bold"},{"type":"underline"}],"text":"Vue"},{"type":"text","text":" port of "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://ui.shadcn.com/","target":"_blank","rel":"noreferrer","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}},{"type":"bold"},{"type":"underline"}],"text":"shadcn/ui"},{"type":"text","text":". We are not affiliated with "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://twitter.com/shadcn","target":"_blank","rel":"noreferrer","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}},{"type":"bold"},{"type":"underline"}],"text":"shadcn"},{"type":"text","text":", but we did get his blessing before creating a Vue version of his work. This project was born out of the need for a similar project for the Vue ecosystem."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"shadcn/vue - Introduction"},{"type":"text","text":" - "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.shadcn-vue.com/docs/introduction.html","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}}],"text":"https://www.shadcn-vue.com/docs/introduction.html"},{"type":"text","text":" "}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"공식문서에 잘 정리가 되어습니다만, 간단하게 순서를 나열해보겠습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"orderedList","attrs":{"tight":true,"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"종속적으로 타입 스크립트 설치"}]}]}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"npm install -D typescript"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"hardBreak"},{"type":"text","text":"2. @nuxtjs/tailwindcss 추가"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"저는 기존에 tailwindcss가 이미 있었지만, nuxtjs/tailwind가 아니었기 때문에 기존의 tailwindcss를 삭제하고 nuxtjs의 module로 다시 추가했습니다."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"npx nuxi@latest module add @nuxtjs/tailwindcss"}]},{"type":"orderedList","attrs":{"tight":true,"start":3},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"shadn/nuxt 추가"}]}]}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":" npx nuxi@latest module add shadcn-nuxt"}]},{"type":"orderedList","attrs":{"tight":true,"start":4},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"nuxt.config.ts 설정하기"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"export default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],\n shadcn: {\n prefix: 'Ui',\n componentDir: './components/ui'\n }\n})\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":" 저는 componentsDir을 수정해도 components/ui에 계속 생성되어 그냥 ui로 사용하고 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"prefix는 앞에 붙여주는건데요 저는 Ui를 사용하고 있습니다. 예를들어 button을 추가했으면 "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"UiButton 이런식으로 사용할 수 있게 만들어줍니다."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"cli 실행하기"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"npx shadcn-vue@latest init\n\nWould you like to use TypeScript (recommended)? no / yes\nWhich framework are you using? Vite / Nuxt / Laravel\nWhich style would you like to use? › Default\nWhich color would you like to use as base color? › Slate\nWhere is your tsconfig.json or jsconfig.json file? › ./tsconfig.json\nWhere is your global CSS file? › › src/index.css\nDo you want to use CSS variables for colors? › no / yes\nWhere is your tailwind.config.js located? › tailwind.config.js\nConfigure the import alias for components: › @/components\nConfigure the import alias for utils: › @/lib/utils\nWrite configuration to components.json. Proceed? > Y/n"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(242, 242, 242)"}}],"text":"components.json을 만들기 위한 질문들이 나옵니다."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(242, 242, 242)"}}],"text":"버튼 추가해보기"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"npx shadcn-vue@latest add button"}]}]}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"cli 설정이 끝난 후, 위와같이 버튼을 추가한다면 "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"components/ui /button이 추가된 것을 확인할 수 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"index.ts와 Button.vue 두개의 파일이 존재할텐데요"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"//button.vue \n\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"//index.ts\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nexport { default as Button } from \"./Button.vue\";\n\nexport const buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"transition duration-300 hover:bg-accent hover:text-accent-foreground \",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n xs: \"h-7 rounded px-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport type ButtonVariants = VariantProps;\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"위와같이 커스텀이 상당히 쉽게 되는 것을 확인할 수 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"또한, assets/css/tailwind.css를 확인해보면"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"type":"text","text":"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n ...\n\n --success: 142.1 76.2% 36.3%;\n --success-foreground: 210 40% 98%;\n\n --warning: 38 92% 50%;\n --warning-foreground: 48 96% 89%;\n }\n\n .dark {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n ...\n\n --success: 142.1 76.2% 36.3%;\n --success-foreground: 210 40% 98%;\n\n --warning: 38 92% 50%;\n --warning-foreground: 48 96% 89%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply font-pretendard;\n @apply bg-background text-foreground;\n }\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이런식으로 추가가 되어있는 것을 알 수 있는데요."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"컬러또한 간단하게 커스텀이 가능합니다. 위의 success warning는 제가 커스텀하게 추가한 컬러인데요."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"커스텀 컬러를 사용하려면 위와같이 컬러를 추가한 뒤,"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"extend: {\n colors: {\n success: {\n DEFAULT: \"hsl(var(--success))\",\n foreground: \"hsl(var(--success-foreground))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning))\",\n foreground: \"hsl(var(--warning-foreground))\",\n },\n }\n}"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이런식으로 추가를 하여 사용할 수 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"예시로 badge에 selected라는 varaint를 추가해 success라는 커스텀 색상을 지정하고, "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"size라는 또다른 variant를 추가한 코드입니다."}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"\nexport const badgeVariants = cva(\n \"cursor-pointer inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n selected: \"bg-success text-success-foreground\",\n },\n size: {\n default: \"px-3 py-2\",\n xs: \"h-6\",\n sm: \"h-7 \",\n lg: \"h-9 \",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport type BadgeVariants = VariantProps;\n"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그 이후 badge.vue에서 props에 size라는 props를 추가해주고, variants에 같이 넘겨주면 간단하게 적용이 됩니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이렇게 shadcn-ui에 대해 간단하게 소개해 보았습니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"필요한 기능들을 더 채워넣고, 커스터마이징이 쉽기 때문에 여러가지 디자인 시스템에 맞춰 언제든 바꿀 수 있을 것 같습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"앞으로 추가해나가며 저만의 컴포넌트 모음을 만들 수 있을거 같아 꽤 기대가 됩니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"저처럼 아직 관심은 있지만, 사용해보지 않으셨다면 한번 꼭 사용해보셨으면 좋겠습니다. "}]}]}

Nuxt3에 Shadcn/ui 사용하기