설치
shadcn 프로젝트에 Steel 테마와 컴포넌트를 추가해요.
Steel 은 npm 패키지가 아니라 shadcn registry 로 배포돼요. 테마와 컴포넌트 코드가 내 프로젝트에 그대로 복사되고, 복사된 코드는 자유롭게 고칠 수 있어요.
요구 사항
- React 19 이상
- Tailwind CSS v4
- shadcn CLI 로 초기화된 프로젝트 (
components.json)
설치 순서
shadcn 초기화
아직 shadcn 을 쓰지 않는 프로젝트라면 먼저 초기화해요. components.json 과 cn() 유틸(lib/utils.ts)이 만들어져요.
pnpm dlx shadcn@latest initSteel 테마 추가
steel-theme 은 세 가지를 한 번에 설치해요.
- 토큰: Atlassian 과 같은 이름의 CSS 변수
--ds-*(라이트는:root, 다크는.dark) - Tailwind 테마:
bg-ds-*,text-ds-*,p-ds-*,rounded-ds-*,shadow-ds-*유틸 - 타이포 유틸:
ds-font-heading-*,ds-font-body*,ds-font-code같은 font 단축 유틸 (@utility)
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel-theme.jsonshadcn 기본 별칭(--primary, --border, --ring …)도 Steel 토큰으로 연결돼서, 기존 shadcn 컴포넌트도 Steel 색으로 보여요.
콘마켓 워크스페이스(사내·업무 도구)라면 steel-theme 대신 Forge 테마 forge-theme 을 설치해요. 토큰 이름이 같아서 컴포넌트는 그대로 쓰고, 브랜드 색과 서체만 바뀌어요. 자세한 내용은 브랜드 를 봐요.
컴포넌트 추가
필요한 컴포넌트를 하나씩 추가해요. 컴포넌트가 의존하는 다른 Steel 컴포넌트와 npm 패키지(radix-ui, class-variance-authority, lucide-react …)도 함께 설치돼요.
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/button.jsonimport { Button } from '@/components/ui/button';
export function CreateIssue() {
return <Button appearance="primary">이슈 만들기</Button>;
}전체 목록은 Components 에서 볼 수 있어요.
SEED 계열 테마와 함께 쓰지 마세요
steel-theme 과 clay-theme 은 shadcn 별칭(--primary 등)을 서로 덮어써요. 한 프로젝트에는 한 시스템의 테마만 설치해요.
서체 (Inter)
Atlassian 브랜드 서체 대신 Inter 를 써요. 토큰의 서체 목록은 "Inter", "Pretendard Variable", Pretendard, ui-sans-serif, … 순서라서, Inter 가 없으면 Pretendard → 시스템 서체로 자연스럽게 넘어가요. 한국어 문구가 많다면 Pretendard 도 함께 불러오면 좋아요.
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<!-- 선택: 한국어 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>npm 으로 관리하고 싶다면 @fontsource-variable/inter 같은 패키지를 써도 돼요.
import '@fontsource-variable/inter';본문 기본 서체는 body 에 걸어 두면 돼요.
body {
font-family: var(--ds-font-family-body);
color: var(--ds-text);
background-color: var(--ds-surface);
}다크 모드
토큰은 라이트·다크 값을 모두 갖고 있어요. 루트 요소에 .dark 클래스를 붙이면 모든 --ds-* 변수가 다크 값으로 바뀌고, 컴포넌트 코드는 그대로예요. 그래서 Steel 컴포넌트에는 dark: 변형을 따로 쓰지 않아요.
// next-themes 를 쓴다면
<ThemeProvider attribute="class" defaultTheme="system">
<App />
</ThemeProvider>// 직접 토글한다면
document.documentElement.classList.toggle('dark');Tailwind dark 변형
내 화면 코드에서 dark: 를 쓰고 싶다면 Tailwind v4 에 .dark 클래스 기준 변형을 선언해요: @custom-variant dark (&:is(.dark *));
수동 설치
shadcn CLI 를 쓸 수 없다면 각 컴포넌트 문서의 수동 설치 항목에서 코드를 복사해요. 이때 테마 CSS(--ds-* 변수와 Tailwind @theme)도 직접 globals.css 에 넣어야 해요. 테마 JSON 은 <사이트>/r/steel-theme.json 에서 받을 수 있어요.