基于 Base UI 的 shadcn 组件
一切
皆斜切。
zzzUI 是一套仅暗色的组件库，游戏 UI 风格鲜明：黑色横条、炭灰底色、一种荧光强调色，以及粗描边的斜切块。
pnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/buttonJob board
5 open · 1 taken
- HarborCourier run across the river1,200cr
- Rail yardsReset the signal relay on the water tower2,400cr
- Canal sideFind a grey cat last seen by the lock gates600cr
- Rail yardsEscort a sealed crate through the yards3,100cr
- Old marketHaggle for spare parts at the night stalls900cr
地基
一个角度，贯穿全局
所有斜切都出自同一个设计 token，角度与斜体字的倾角一致。调整它，按钮、标签页和输入框会一起重新切角，描边依旧均匀。
- 只切角，不倒圆每一块都是斜切块，边缘按同一角度斜切；并排放置时，彼此嵌合。
- 以描边分层不用阴影。层次由墨黑粗描边和一道暗色副线撑起，焦点由黄色焦点框标出。
- 动效各有其用按下迅速、松开回弹，斜切块滑动，弹出层展开又收起。系统开启「减少动态效果」时，全部静止。
--zero-slant14°
实战
调度控制台
命令面板、频道与图表，都由同一套斜切块搭成。可以执行命令，也可以在街区频道里发言。
Take the next rush job⌘T
Hand in the cold box
Reroute past Tower 9
Ping the north gate⌘P
Mute the east district
This week
Jobs handed in, east district
East district
Channel · 3 drivers on shift
Live
Tonight
Dispatch assigned the sealed crate21:02
Mara 21:04
游戏内
能实际操作的 HUD
会留下残影的数值条、带冷却的快捷栏、完成后划掉的目标。快捷栏可以直接使用：维修包（kit）修补船体，信号弹（flare）和钥匙（key）用来完成这一班。
Hull
Shield
12,480cr
Night shift
Current: Mark the drop zone
Current: Open the north gate
更多代码块：Settings menuMission briefingLoadoutLeaderboardTitle screenPause menuCharacter selectCommunity feedLevel rewardsDaily schedule
一览
全部组件
- Button按下收缩、松开回弹的斜切块。
- Input内凹的输入框，可放图标或操作。
- Field标签、提示，以及滑入的错误信息。
- Select以描边托起的弹层，选中行高亮。
- Textarea同样的输入框，用于多行，随内容增高。
- Checkbox斜切的方框，选中后填满强调色。
- Radio group选中的一项内嵌一块斜切块。
- Switch斜切块回弹到另一端。
- Slider斜轨道上的斜切滑块，可放一个或两个。
- Tabs斜切块沿斜轨道回弹滑动。
- Dialog压暗页面上的面板，配黑色标题栏。
- Sheet从边缘滑入的对话框。
- Popover出现在触发元素旁的面板。
- Tooltip浅色斜切块上的一行提示。
- Dropdown menu逐行高亮的操作列表。
- Alert四种语气，各配徽标。
- Progress斜切进度条，或分格的充能条。
- Skeleton带流光的占位块。
- Toast滑入后自动消失的消息。
- Card带黑色标题栏的卡片。
- Table斜线纹理面板上的数据行。
- Badge小号的斜切标签。
- Avatar墨黑描边圈中的头像或首字母。
- Breadcrumb以斜杠分隔的当前路径。
- Pagination由小斜切块组成的分页。
- Sidebar可收起为图标栏的黑色侧栏。
- Accordion每次只展开一节的分区。
- Collapsible原地展开的面板。
- Toggle按下后保持按下的斜切块。
- Toggle group并排嵌合的一组开关按钮。
- Separator一条暗色分隔线。
- Command输入即可查找操作。
- Combobox边输入边给出建议的输入框。
- Context menu右键弹出的菜单。
- Menubar黑色横条上的菜单。
- Hover card悬停链接时出现的预览卡片。
- Input OTP验证码输入，一格一个字符。
- Input group两端可附加内容的输入框。
- Button group彼此嵌合的一组按钮。
- Native select输入框中的浏览器原生选择器。
- Kbd需要按下的按键。
- Label控件的名称。
- Alert dialog执行不可撤销的操作前先行确认。
- Drawer可滑动关闭的抽屉面板。
- Navigation menu共用一块滑动面板的多个菜单。
- Item列表中的一项。
- Empty没有内容时显示的空状态。
- Scroll area滑块斜切的滚动条。
- Aspect ratio保持宽高比的容器。
- Spinner表示正在加载。
- Calendar日期排成彼此嵌合的斜切块。
- Carousel可滑动切换的轮播。
- Chart套用 zzzUI 配色的 Recharts。
- Sparkline一个词大小的趋势线。
- Ticker不间断滚动的新闻条。
- Resizable边缘可拖动的面板。
- Form字段、字段组与服务端错误。
- Message对话中的一轮发言。
- Bubble切去一角的对话气泡。
- Marker对话流中不属于任何人的提示。
- Attachment已发送或正在发送的文件。
- Code block黑色底板中的代码。
- Trace智能体执行的步骤。
- Message scroller始终停在最新一条消息。
- Questionnaire一次只问一个问题。
- Cut-in横穿屏幕的过场条。
- Gauge下降时留下残影的数值条。
- Inventory带稀有度光效与冷却的物品格。
- Hold button按住直到填满才生效。
- Counter滚动变化并抛出差值的数字。
- Objectives已完成的目标打勾并加删除线。
- Dialogue逐字显示的台词、说话人与带编号的回复。
- Compass带标记的方位条。
- Floating text弹出上浮的伤害与治疗数字。
- Feed屏幕边缘的实时事件。
- Stats与当前装备相比的增减。
- Radial menu按方向选择的轮盘菜单。
- Post card带封面与作者的帖子卡片。
- Profile chip头像、名字、经验与等级。
- Reward track按等级领取的奖励。
- Masonry高度不一的卡片排成多列。
- Accent switch一排十二种强调色，记住所选。
- Accent picker从按钮中选择强调色，或自定义颜色。
- Icons三十个同一倾角的实心图标。