밀당 DS

시작하기

밀당의 화면을만드는 기본.

필요한 UI를 고르고, 제품에 맞는 테마로 사용하세요. 같은 코드로 서로 다른 디자인을 만들 수 있습니다.

컴포넌트 보기
지금 이 화면에 걸린 테마
Chip
중2
온라인
출석
지각
결석
상담 대기
숙제 완료
휴원
Button
Checkbox · ToggleSwitch
brand.*
Spinner

Button

아이디어를 화면으로.

Chip

온라인
출석
지각
중2
숙제
휴원
지금 이 화면에 걸린 테마
컴포넌트 보기 →

하나의 코드, 세 가지 테마

코드는 그대로.
디자인은 다르게.

테마를 바꾸면 색상과 글꼴,
컴포넌트 스타일이 함께 바뀝니다.

테마 더 살펴보기 →

템플릿

화면으로 살펴보기.

컴포넌트와 테마가 모여 만드는 화면을 살펴보세요.

템플릿 둘러보기 →

로그인

처음 만나는 화면부터

테이블과 상세 패널

많은 정보를 다루는 화면까지

ids-use

디자인과 코드를 잇는 ids-use.

Figma의 컴포넌트를 밀당 DS React 코드로 옮기고, 코드를 다시 Figma 시안으로 확인합니다.

01 · Figma → React

디자인을 코드로

Figma의 컴포넌트를 실제 DS 컴포넌트로 옮깁니다.

02 · React → Figma

코드를 다시 디자인으로

구현한 화면을 Figma에서 확인하고 다듬습니다.

Figma → React + Panda CSSpnpm ids-use export --component MyForm --out ./MyForm.tsx
React → Figmapnpm ids-use render --file page.tsx

같은 컴포넌트 정의를 기준으로 양방향 변환을 확인할 수 있습니다.

소개 보기

디자인시스템을 직접 사용해보세요.

컴포넌트 사용법과 테마 설정을 확인하고, 프로젝트에 적용해보세요.

시작 가이드