shadcn 베이스와 스타일, 아이콘을 선택하세요

Source: Dev.to

Overview

shadcncraft는 이제 Base UI, 일곱 가지 shadcn 스타일, 여러 아이콘 라이브러리, 그리고 설치 전에 조합을 미리 볼 수 있는 새로운 커스터마이저를 지원합니다. 프로젝트의 설정이 이제 진실의 원천이 되므로, 컴포넌트는 선택한 기본값에 맞게 설치됩니다.

Supported Bases

• Radix UI
• Base UI

두 베이스 모두 완전 지원됩니다.

Supported Styles

일곱 가지 shadcn 프리셋을 모두 사용할 수 있습니다:

프로젝트에 이미 이러한 스타일 중 하나가 적용되어 있다면, shadcncraft가 자동으로 이를 따릅니다. shadcn으로 만든 커스텀 스타일도 사용할 수 있습니다.

Supported Icon Libraries

• Lucide
• Tabler Icons
• Hugeicons
• Phosphor Icons
• Remix Icon

Live Customizer

각 컴포넌트와 블록 페이지에는 이제 실시간 커스터마이저가 포함되어 다음을 할 수 있습니다:

• Radix와 Base UI 전환
• style 프리셋 변경
• icon library 교체
• fonts와 radius 조정
• shadcn 또는 tweakcn 테마 적용

설치하기 전에 정확히 어떤 결과가 나올지 미리 확인할 수 있습니다. 커스터마이저는 shadcn create와 동일한 방식으로 작동하며, 모든 컴포넌트와 블록에 적용됩니다.

Note: 일부 오래된 블록은 아직 모든 옵션을 지원하지 않을 수 있습니다. 우리는 시간이 지나면서 이를 업데이트하고, 각 컴포넌트와 블록 페이지에 지원 여부를 명확히 표시할 예정입니다.

Enabling Style‑Aware Install

선택한 스타일을 설치에 반영하려면 components.json의 한 줄을 수정하십시오:

{
  "registries": {
    "@shadcncraft": {
-     "url": "https://shadcncraft.com/r/{name}",
+     "url": "https://shadcncraft.com/r/{style}/{name}",
      "headers": {
        // ... your existing headers ...
      }
    }
  }
}

이것만 하면 됩니다.

Conclusion

새로운 커스터마이저는 shadcncraft를 shadcn create 워크플로와 더욱 가깝게 만들어 줍니다: 동일한 스타일, 동일한 구조, 동일한 기대감. 이제 디자인 시스템이 Figma와 코드 양쪽에서 일관되게 동작합니다.

추가 업데이트가 곧 찾아옵니다.