Kbd
설치 확인단축키 표시
1. 목적과 출처
단축키 표시
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/kbd.tsx- Registry
@adcapsule/kbd
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 쓰임 | 모양 |
|---|---|
| 한 키 | Esc |
| 조합 KbdGroup | ⌘K |
| 문장 안 | Enter를 누르면 저장합니다 |
| 버튼 안 |
3. 속성 바꿔 보기
⌘K
키
4. 설치와 사용
- npm 패키지
- 없음
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- 한 키는 Kbd, 조합은 KbdGroup
- 버튼·문장 안에 넣기
- Mac/Windows 표기는 화면에서 고름
공통으로 유지할 토큰
- surface.raised (배경, --muted)
- text.secondary (글자)
- font.size.caption