Components for shadcn, on Base UI
Cut on
the slant.
zzzUI is a dark-only component library with a strong game-UI look: black bars, a charcoal ground, one fluorescent accent, slabs with thick outlines.
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
The foundation
One angle, everywhere
Every slanted cut comes from a single token, set to sit with the italic. Turn it and the buttons, the tabs and the wells all re-cut together, with their outlines still even.
- Cut, never roundedEvery block is a slab with an edge cut on one slant. Slabs set side by side nest into each other.
- Lifted by outlineNo shadows. Thick ink outlines and a quiet second line do the work, and a yellow frame marks focus.
- Moves on purposeA fast press and a springing release, a slab that slides, popups that grow and fold. All of it holds still for reduced motion.
--zero-slant14°
At work
A dispatch console
A command palette, a channel and a chart, built from the same slabs. Run a command, or say something to the district.
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
In the game
A HUD that works
Gauges that leave a trail, a hotbar with cooldowns, objectives that strike through. Use the hotbar: the kit patches the hull, the flare and the key finish the shift.
Hull
Shield
12,480cr
Night shift
Current: Mark the drop zone
Current: Open the north gate
More blocks:Settings menuMission briefingLoadoutLeaderboardTitle screenPause menuCharacter selectCommunity feedLevel rewardsDaily schedule
The set
Components
- ButtonA slab that drops when pressed and springs back.
- InputAn inset well, with room for an icon or an action.
- FieldLabel, help and an error that slides in.
- SelectA popup lifted by outline; the row lights up.
- TextareaThe same well, for several lines; it grows.
- CheckboxA slanted well that fills with the accent.
- Radio groupThe chosen one holds a slab.
- SwitchA slab that springs to the other end.
- SliderSlab thumbs on a slanted track; one or two.
- TabsA slab that springs along a slanted track.
- DialogA panel over a dimmed page, a black title bar.
- SheetA dialog that slides in from an edge.
- PopoverA panel beside its trigger.
- TooltipOne line on a light slab.
- Dropdown menuActions in rows that light up.
- AlertFour tones, each with its badge.
- ProgressA slanted bar, or a gauge of charges.
- SkeletonPlaceholders with a moving glint.
- ToastMessages that slide in and leave.
- CardA box with a black header bar.
- TableRows on a hatched surface.
- BadgeA small slanted label.
- AvatarA face or initials in an ink ring.
- BreadcrumbThe way here, between slanted bars.
- PaginationPages as small slabs.
- SidebarA black strip that folds to icons.
- AccordionSections that open one at a time.
- CollapsibleA panel that unfolds in place.
- ToggleA slab that stays down.
- Toggle groupToggles nesting in a row.
- SeparatorA quiet line.
- CommandType to find an action.
- ComboboxA field that suggests as you type.
- Context menuThe menu where you right-click.
- MenubarMenus on a black bar.
- Hover cardA preview behind a link.
- Input OTPA code, a character to a cell.
- Input groupA well with addons at either end.
- Button groupButtons that nest.
- Native selectThe browser's picker in a well.
- KbdA key to press.
- LabelA control's name.
- Alert dialogAsks before what cannot be undone.
- DrawerA sheet you can swipe away.
- Navigation menuMenus sharing one sliding panel.
- ItemOne thing in a list.
- EmptyWhat shows when there is nothing.
- Scroll areaScrollbars with a slanted thumb.
- Aspect ratioA box that keeps its shape.
- SpinnerSomething is loading.
- CalendarDays as nesting slabs.
- CarouselSlides to swipe through.
- ChartRecharts in zzzUI's colours.
- ResizablePanels with a draggable edge.
- FormFields, fieldsets and server errors.
- MessageA turn in a conversation.
- BubbleWhat was said, a corner cut.
- MarkerA note nobody said.
- AttachmentA file, sent or sending.
- Code blockCode in a black well.
- TraceAn agent's steps.
- Message scrollerKeeps to the newest turn.
- QuestionnaireOne question at a time.
- Cut-inA band thrown across the screen.
- GaugeA bar that leaves a trail when it drops.
- InventorySlots with a rarity glow and a cooldown.
- Hold buttonHold it until the fill runs across.
- CounterA number that rolls and throws its change.
- ObjectivesMarks and a strike through what is done.
- DialogueA typed line, a speaker, numbered replies.
- CompassA heading strip with markers.
- Floating textHits and heals that pop and rise.
- FeedWhat just happened, at the edge.
- StatsBetter or worse than what you have.
- Radial menuA wheel picked by direction.
- Post cardA post with its cover and its author.
- Profile chipAvatar, name, experience, level.
- Reward trackRewards per level, to claim.
- MasonryCards of any height in columns.
- IconsThirty solid glyphs on the same slant.