무료 UI 툴 Shadcn 사용해

오늘은 프로젝트를 만들고 사용을 할 때에, 무료로 사용할 수 있는 툴들을 활용한 프로젝트 운영을 할 수 있는 환경으로 진행해보려고 합니다.

 

1. UI - Shadcn

shadcn 은 Tailwind CSS 로 만들어진 React component 입니다.

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

Next.jsInstall and configure shadcn/ui for Next.js.ui.shadcn.com

첫 번째 UI 설정을 위해 Shadcn 을 사용해 보려고 합니다. 저는 next 기반으로 사용할 예정입니다.

npx shadcn@latest init

 

위의 명령어를 사용해 프로젝트를 생성함과 동시에 설정들을 해줍니다

 

 

 

기본적으로 설치가 끝났으면, 이제 component 들을 사용하는 방법을 알아보겠습니다

npx shadcn@latest add accordion

 

이런 식으로 사용하고 싶은 컴포넌트들을 그때마다 install 을 해서 사용할 수 있습니다.

 

 

아래는 Accordion 을 사용해본 케이스입니다

import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion";

export default function Home() {
    return (
        <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
            <h1 className="mt-10">Kyurasi Shadcn Example</h1>
            <Accordion
                type="single"
                collapsible
                className="w-full mt-10"
                defaultValue="item-1"
            >
                <AccordionItem value="item-1">
                    <AccordionTrigger>Product Information</AccordionTrigger>
                    <AccordionContent className="flex flex-col gap-4 text-balance">
                        <p>
                            Our flagship product combines cutting-edge
                            technology with sleek design. Built with premium
                            materials, it offers unparalleled performance and
                            reliability.
                        </p>
                        <p>
                            Key features include advanced processing
                            capabilities, and an intuitive user interface
                            designed for both beginners and experts.
                        </p>
                    </AccordionContent>
                </AccordionItem>
                <AccordionItem value="item-2">
                    <AccordionTrigger>Shipping Details</AccordionTrigger>
                    <AccordionContent className="flex flex-col gap-4 text-balance">
                        <p>
                            We offer worldwide shipping through trusted courier
                            partners. Standard delivery takes 3-5 business days,
                            while express shipping ensures delivery within 1-2
                            business days.
                        </p>
                        <p>
                            All orders are carefully packaged and fully insured.
                            Track your shipment in real-time through our
                            dedicated tracking portal.
                        </p>
                    </AccordionContent>
                </AccordionItem>
                <AccordionItem value="item-3">
                    <AccordionTrigger>Return Policy</AccordionTrigger>
                    <AccordionContent className="flex flex-col gap-4 text-balance">
                        <p>
                            We stand behind our products with a comprehensive
                            30-day return policy. If you&apos;re not completely
                            satisfied, simply return the item in its original
                            condition.
                        </p>
                        <p>
                            Our hassle-free return process includes free return
                            shipping and full refunds processed within 48 hours
                            of receiving the returned item.
                        </p>
                    </AccordionContent>
                </AccordionItem>
            </Accordion>
        </div>
    );
}

 

 

결과물

 

많은 UI 툴들이 있겠지만, 오늘은 무료로 사용을 할 수 있으며, React 기반의 tailwind css 인, 금방 가져다 사용할 수 있는 shadcn 을 알아봤습니다