shadcn-rails는 다음과 같은 핵심적인 강점을 통해 개발 생산성을 향상시킵니다.
shadcn-rails를 선택하는 이유
-
복사-붙여넣기 방식: 별도의 npm 패키지 설치 없이 컴포넌트를 직접 복사하여 사용하므로, 완벽한 제어 및 맞춤화가 가능합니다.
-
ViewComponent 기반: Ruby의 ViewComponent를 사용하여 깨끗하고 테스트 가능하며 재사용 가능한 UI를 구축합니다.
-
Stimulus 통합: Hotwire의 Stimulus 프레임워크를 통해 인터랙티브한 컴포넌트 기능을 제공합니다.
-
Tailwind CSS 스타일링: Tailwind CSS 유틸리티 클래스를 활용하여 손쉬운 스타일 맞춤화를 지원합니다.
-
접근성 및 다크 모드: WAI-ARIA 가이드라인을 준수하며, CSS 사용자 정의 속성을 통한 다크 모드를 기본으로 지원합니다.
설치 과정
shadcn-rails를 사용하려면 Gemfile에 젬을 추가한 후, 설치 제너레이터를 실행합니다.
ruby
# Gemfile
gem "shadcn-rails"
이후 다음 명령어를 실행합니다.
bash
rails generate shadcn:install
이 제너레이터는 다음 작업을 수행합니다:
-
테마 변수를 포함한 기본 CSS를 스타일시트에 추가합니다.
-
인터랙티브 요소(스위치, 슬라이더 등)를 위한 컴포넌트 CSS를 추가합니다.
-
shadcn 테마 색상으로 Tailwind CSS를 구성합니다.
-
인터랙티브 컴포넌트를 위한 Stimulus 컨트롤러를 설정합니다.
스타일시트 구성
shadcn-rails는 shadcn/base.css와 shadcn/components.css 두 가지 CSS 파일을 사용합니다.
-
shadcn/base.css: 테마(색상, 테두리 반경), 애니메이션(아코디언, 다이얼로그, 토스트), 포커스 스타일을 위한 CSS 사용자 정의 속성을 포함합니다. -
shadcn/components.css:data-state속성을 사용하는 인터랙티브 요소(Switch, Accordion, Dialog 등) 및 사용자 정의 폼 입력(Slider, Checkbox, Radio)을 위한 컴포넌트별 스타일을 제공합니다.
Tailwind CSS (application.tailwind.css)의 경우:
css
@import "shadcn/base";
@import "shadcn/components";
@tailwind base;
@tailwind components;
@tailwind utilities;
Sprockets (application.css)의 경우:
css
/*
*= require shadcn/base
*= require shadcn/components
*= require_self
*/
컴포넌트 추가
필요한 개별 컴포넌트는 다음 명령어를 통해 추가할 수 있습니다.
bash
rails generate shadcn:component button
rails generate shadcn:component dialog
rails generate shadcn:component tabs
주요 컴포넌트 카테고리
shadcn-rails는 버튼 및 액션, 폼 입력, 데이터 표시, 피드백, 오버레이, 내비게이션, 레이아웃 등 다양한 카테고리의 컴포넌트를 제공합니다.