본문으로 건너뛰기

Showcase

45개 MSK UI Kit primitive를 한 페이지에서 모아 본 라이브 갤러리입니다. 각 컴포넌트의 상세 API/접근성은 좌측 사이드바의 개별 페이지를 참고하세요. (이 페이지는 Laravel _template 의 GET /ui-kit 데모와 같은 구성입니다.)

버튼 · 피드백​

Button​

Busy state작업 중 버튼 폭은 유지되고, 중복 클릭은 native disabled로 차단됩니다.

Switch​

공개 기능 활성

Segmented​

선택: 본문+노트

Badge​

DraftActivePendingBlocked

Alert​

설정 확인

필수 설정이 아직 남아 있습니다. 저장 전에 누락 항목을 확인하세요.

Progress​

64%

Spinner​

처리 중...

Skeleton​

Empty State​

콘텐츠가 없습니다.

첫 항목을 만들어 이 영역을 채울 수 있습니다.

Field​

폼 선택​

Select​

Combobox​

Checkbox​

Radio Group​

폼 값​

Slider​

34%

Tag Input​

laravelfilament

Rating​

3 / 5

Dropzone​

파일을 끌어다 놓거나 클릭
  • report-2026.pdf248 KB
  • cover.png1.2 MB

Calendar​

2026년 6월
일월화수목금토

네비게이션​

Tabs​

UI Kit은 Core가 구현을 소유하고 프로젝트는 data API와 token만 사용합니다.

Accordion​

짧은 텍스트 안내는 tooltip, 선택 가능한 작은 패널은 popover를 사용합니다.

Pagination​

Stepper​

  1. 1계정
  2. 2프로필
  3. 3완료

Toolbar​

오버레이​

Tooltip​

Popover​

명령을 선택하세요.

Drawer​

Dialog​

Command Palette​

  • 설정
  • 새 프로젝트
  • 멤버 초대
  • 로그아웃

Inline Confirm​

Copy​

hello world

Toast​

버튼을 눌러 toast를 확인하세요.

데이터 · 미디어​

Avatar​

AWTJDRn
ABC+5

Table​

이름나이
미나41
아론28
제인34
슬라이드 1
슬라이드 2
슬라이드 3

폼 · 레이아웃 소품​

Input​

https://

Textarea​

Card​

프로젝트 설정

팀과 권한을 관리합니다.

본문 영역입니다. 어떤 콘텐츠든 담을 수 있습니다.

Separator​

섹션 A

섹션 B

또는
왼쪽오른쪽

Kbd​

⌘K명령 팔레트 열기CtrlS저장

Collapsible​