v0.0.0Tailwind v4
OpenIoT Design System
OpenIoT 의 모든 Next.js 제품이 공유하는 디자인 언어이자 개발 도구예요. 토큰·컴포넌트·아이콘을 워크스페이스 패키지로 제공해, 디자이너와 개발자가 같은 기준으로 빠르게 협업할 수 있어요.
왜 OpenIoT DS 인가요?
토큰 기반 일관성
브랜드 스케일·시맨틱 토큰·다크 모드를 @theme 한 곳에서 관리해요.
RSC 우선
Button·Badge·Input 은 서버 컴포넌트에서 바로 쓸 수 있어요.
접근성 내장
Radix 기반 Dialog, 포커스 링, sr-only 라벨을 기본 제공해요.
타입 안전
cva 변형이 그대로 타입이 되어 잘못된 variant 를 막아줘요.
사용 시 주의
- globals.css 에
@source로 @openiot/ui dist 를 가리켜야 컴포넌트 클래스가 생성돼요. - Dialog 는 유일한 클라이언트 컴포넌트라
'use client'경계 안에서 미리보기를 렌더해요. - 다크 모드는
<html>에.dark클래스를 토글해 활성화해요.
컴포넌트
현재 제공하는 핵심 컴포넌트 4개예요. 각 카드를 눌러 사용법과 변형을 확인해 보세요.
Button액션을 트리거하는 버튼Badge상태·카테고리 라벨Text Field텍스트 입력 · 라벨 · 검증Dialog모달 오버레이Selection체크박스·라디오·스위치·선택·슬라이더View ControlChip·Filter·Tab 전환 컨트롤LoadingSkeleton·Spinner 대기 표현NavigationAdmin 사이드바·App 상/하단 내비게이션Admin Header어드민 페이지 제목·부제목·필터 헤더Accordion콘텐츠 접기/펼치기TableData Table·Description TableFeedbackTooltip·Toast 피드백LayoutApp·Admin 화면 셸·그리드·간격