[CSS] shadcn ui - 공유 UI 컴포넌트

• 공유 컴포넌트 3대장 
  • MUI ( Matrerial UI) - 오픈 소스 React Component Library
  • Ant Design  
  • React Bootstrap
• 개인적으로 위 3대장은 커스텀 하기가 어려워 요즘 뜨고 있는 shadncd ui를 사용해봄

 

• shadcn ui는 Radix-ui를 기반으로 하고 있음 
  • Radix ui 란 고품질의 액세스 가능한 디자인 시스템 및 웹 앱을 구축하기 위한 오픈 소스 UI 컴포넌트 라이브러리.
  • 접근성, 사용자 정의, 개발자 경험에 초점을 맞춘 하위 수준의 UI컴포넌트 라이브러리
• shadcn ui의 특징
  1. Accessible : 컴포넌트는 가능한 경우 WAI-ARIA 설계 패턴을 준수합니다. aria 및 role 속성, 포커스 관리 및 키보드 탐색을 포함하여 접근성과 관련된 많은 어려운 구현 세부 사항을 처리합니다. 접근성 문서에서 더 많은 것을 볼 수 있습니다.
  2. Unstyled : Components은 스타일이 없는 상태로 제공되므로 스타일링을 완벽하게 제어할 수 있습니다. 구성 요소는 바닐라 CSS, CSS 프리프로세서, CSS-in-JS 라이브러리와 함께 스타일링 할 수 있다. 스타일링 가이드에서 자세히 알아보십시오.
  3. Opened : Radix Primitives는 사용자의 요구에 맞게 사용자 정의되도록 설계되었습니다. 개방형 구성요소 아키텍처는 각 구성요소 부분에 대한 세부적인 액세스를 제공하므로, 각 구성요소 부분을 래핑하고 event listeners, props, or refs를 추가할 수 있습니다.
  4. Uncontrolled : 해당되는 경우 구성 요소는 기본적으로 uncontrolled이지만 대신 controlled할 수도 있습니다. 모든 동작은 내부적으로 처리되므로 로컬 상태를 생성할 필요 없이 최대한 원활하게 시작 및 실행할 수 있습니다.
  5. Developer experience : 우리의 주요 목표 중 하나는 최고의 개발자 경험을 제공하는 것이다. Radix Primitives는 완전한 형식의 API를 제공합니다. 모든 구성 요소는 유사한 API를 공유하여 일관되고 예측 가능한 환경을 만듭니다. 또한 asChild prop을 구현하여 사용자가 렌더링된 요소를 완전히 제어할 수 있도록 했습니다.
  6. Incremental adoption : 각 primitive은 개별적으로 설치할 수 있으므로 점진적으로 적용할 수 있습니다. 원시 요소는 또한 점진적 채택을 더욱 용이하게 하기 위해 독립적으로 버전화됩니다.
• 원하는 컴포넌트를 추가하고 싶다면 https://ui.shadcn.com/docs/ 해당 사이트에 들어가서 절차를 따르면 됨
•  

npx shadcn-ui@latest add alert
// alert 컴포넌트 띄우고 싶다면

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"


<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Example

import { AlertCircle, FileWarning, Terminal } from "lucide-react"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

export function AlertDestructive() {
  return (
    <Alert variant="destructive">
      <AlertCircle className="h-4 w-4" />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
  )
}

//Alert 'destructiv'를 매겨줘서 좀 더 명확하게 에러 창임을 보여줌 .
//tailwind css를 접목시켜 커스텀 하기 용이함

 

참고 : https://velog.io/@ckstn0777/shadcnui-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B3%B5%EC%9C%A0-UI-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B2%BD%ED%97%98

shadcn/ui 를 이용한 공유 UI 컴포넌트 사용 경험