[Library] [shadcn/ui]

2024. 3. 4. 16:17ใ†๐Ÿ“š Library

๊ฐœ์š”

  • ๋งํฌ: ui.shadcn.com
  • ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋กœ ๋‹คํฌ๋ชจ๋“œ, ์บ˜๋ฆฐ๋”, ์นด๋“œ, ๋ฒ„ํŠผ ๋“ฑ ๋‹ค์–‘ํ•œ UI๋“ค์„ ์ œ๊ณตํ•จ

์„ค์น˜(Next.js ๊ธฐ์ค€)

  • ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ: CNA

    npx create next-app@latest my-app --typescript --tailwind --eslint

  • CLI ์ž…๋ ฅ

    npx shadcn-ui@latest init

  • components.json ๊ตฌ์„ฑ์„ ์œ„ํ•œ ๋ช‡๊ฐ€์ง€ ์งˆ๋ฌธ๋“ค

    Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? โ€บ Default
Which color would you like to use as base color? โ€บ Slate
Where is your global CSS file? โ€บ โ€บ app/globals.css
Do you want to use CSS variables for colors? โ€บ no / yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
Where is your tailwind.config.js located? โ€บ tailwind.config.js
Configure the import alias for components: โ€บ @/components
Configure the import alias for utils: โ€บ @/lib/utils
Are you using React Server Components? โ€บ no / yes


# ์‚ฌ์šฉ

* ํฐํŠธ ์„ค์ • (์˜ˆ์‹œ: Inter)

root layout์— ์ ์šฉ

import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"

import { cn } from "../@/lib/utils"

const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
})

export default function RootLayout({ children }: RootLayoutProps) {
return (


<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
>
...



)
}


tailwind.config.js์— ์„ค์ •

const { fontFamily } = require("tailwindcss/defaultTheme")

/* @type {import('tailwindcss').Config} /
module.exports = {
darkMode: ["class"],
content: ["app/*/.{ts,tsx}", "components/*/.{ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
},
},
}


* App structure

.
โ”œโ”€โ”€ app
โ”‚ โ”œโ”€โ”€ layout.tsx
โ”‚ โ””โ”€โ”€ page.tsx
โ”œโ”€โ”€ components
โ”‚ โ”œโ”€โ”€ ui
โ”‚ โ”‚ โ”œโ”€โ”€ alert-dialog.tsx
โ”‚ โ”‚ โ”œโ”€โ”€ button.tsx
โ”‚ โ”‚ โ”œโ”€โ”€ dropdown-menu.tsx
โ”‚ โ”‚ โ””โ”€โ”€ ...
โ”‚ โ”œโ”€โ”€ main-nav.tsx
โ”‚ โ”œโ”€โ”€ page-header.tsx
โ”‚ โ””โ”€โ”€ ...
โ”œโ”€โ”€ lib
โ”‚ โ””โ”€โ”€ utils.ts
โ”œโ”€โ”€ styles
โ”‚ โ””โ”€โ”€ globals.css
โ”œโ”€โ”€ next.config.js
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ postcss.config.js
โ”œโ”€โ”€ tailwind.config.js
โ””โ”€โ”€ tsconfig.json


# ์ ์šฉ ์˜ˆ์‹œ

npx shadcn-ui@latest add button

import { Button } from "@/components/ui/button"

export default function Home() {
return (




)
}

```

reference: https://ui.shadcn.com/docs/installation/next

'๐Ÿ“š Library' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Library] Zustand  (0) 2024.03.19
[Library] react-hook-form  (0) 2024.03.07
[Library] Zod  (0) 2024.03.07
[Library]lodash์— ๋Œ€ํ•˜์—ฌ  (0) 2023.04.27

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€ 0

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”