这份图鉴适合在选型、写界面和代码审查时快速查阅。每张组件卡片只保留外观、核心状态和高频属性，避免完整示例代码干扰浏览。

01

基础操作

Button、Button Group、Toggle、Badge、Avatar、Kbd 与 Separator。先看组件的视觉层级，再查 variant、size 和 orientation。

shadcn-svelte 基础操作组件速查，包含按钮、按钮组、切换按钮、徽章、头像、键盘按键和分隔线
点击图片查看完整高清长图。

02

表单输入

Input、Textarea、Checkbox、Radio Group、Switch、Slider、Input OTP、Field、Input Group 与 Calendar。仓库中的复杂选择器优先使用 Button + Popover。

shadcn-svelte 表单输入组件速查，包含输入框、复选框、单选组、开关、滑块、验证码、字段和日历
点击图片查看完整高清长图。

03

反馈与状态

Alert、Alert Dialog、Progress、Skeleton、Spinner、Sonner、Empty 与 Tooltip。重点区分普通提示、危险操作确认和异步状态。

shadcn-svelte 反馈状态组件速查，包含提示、警告对话框、进度条、骨架屏、加载、通知、空状态和工具提示
点击图片查看完整高清长图。

04

浮层与菜单

Dialog、Sheet、Drawer、Popover、Dropdown Menu、Context Menu、Hover Card 与 Command。side、align 和 open 是最常查的控制项。

shadcn-svelte 浮层菜单组件速查，包含对话框、侧边抽屉、底部抽屉、弹出层、菜单、悬停卡片和命令面板
点击图片查看完整高清长图。

06

数据与高级布局

Table、Data Table、Carousel、Scroll Area、Resizable、Aspect Ratio、Chart 与 Range Calendar。先选择信息结构，再补排序、筛选、分页等行为。

shadcn-svelte 数据与高级布局组件速查，包含表格、数据表格、轮播、滚动区域、可调整区域、宽高比、图表和范围日历
点击图片查看完整高清长图。