sh4dcnv2 · atlas
← libraries

@afterglow

A complete terminal UI system for shadcn with Base UI components, terminal-specific building blocks, and eight phosphor color themes.

66 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://afterglow.thebuilder.dk/r/registry.json
pnpm pnpm dlx shadcn@latest add https://afterglow.thebuilder.dk/r/registry.json
bun bunx shadcn@latest add https://afterglow.thebuilder.dk/r/registry.json
fetch registry curl -s https://afterglow.thebuilder.dk/r/registry.json

Components

66 total
Terminal Theme theme

The tokens, typography, motion and CRT effects used by every component.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/theme.json
Accordion ui

Sections that open one at a time or many. The marker is a plus that rotates into a minus.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/accordion.json
Alert ui

A notice with a lit left edge and a matching icon. Four tones.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/alert.json
Alert Dialog ui

A pink confirmation dialog for destructive or irreversible actions.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/alert-dialog.json
Avatar ui

Initials in mono inside a bordered square.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/avatar.json
Badge ui

A bordered rectangle of tracked-out mono for a status or a count. Eight variants.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/badge.json
Breadcrumb ui

A path in mono, separated by slashes, with the current segment in white.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/breadcrumb.json
Button ui

Seven variants and five sizes in uppercase mono. `primary` is filled phosphor; `signal` marks urgent states.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/button.json
Calendar ui

A square month grid with phosphor selection, an amber today marker and Afterglow navigation buttons.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/calendar.json
Card ui

A panel with a colored left edge, or `accent={false}` for none. With a `CardLink`, the edge traces the card on hover.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/card.json
Chart ui

Recharts wired to the five chart colors, terminal tooltip and stepped reveal.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/chart.json
Checkbox ui

`[ ]` and `[x]`. A square that fills with the beam when it is on.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/checkbox.json
Code Block ui

Shiki wired to the phosphor palette, with a copy button. Takes a string of code and highlights it on the server.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/code-block.json
Collapsible ui

The accordion without the styling, for when you have drawn the trigger yourself.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/collapsible.json
Combobox ui

A text field that filters its list as you type. With `multiple` set, each pick becomes a chip in the field.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/combobox.json
Command ui

A search line and a list that narrows as you type. Groups, shortcuts, and a dialog wrapper.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/command.json
Context Menu ui

A system menu at the pointer, with choices, submenus, shortcut hints and destructive actions.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/context-menu.json
Dialog ui

Opens in four steps rather than on a curve, with one pass of the beam down the panel.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/dialog.json
Dropdown Menu ui

Items, checkbox and radio items, submenus, and shortcut hints in the same mono as the keys.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/dropdown-menu.json
Empty ui

A dashed hairline box for a list with nothing in it.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/empty.json
Hover Card ui

A bordered preview panel for a link, with one phosphor edge and room for interactive content.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/hover-card.json
Input ui

A hairline field in mono with a phosphor caret. Focus brightens the border instead of adding a ring.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/input.json
Input Group ui

Icons, text and buttons inside a field's border. The whole group glows while the control in it has focus.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/input-group.json
Input OTP ui

One cell per character, with a drawn caret in the active one.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/input-otp.json
Kbd ui

A key with two pixels of implied depth under it. Pass `glyph` for `⌘`, `⇧` and `↵`.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/kbd.json
Label ui

A field's name, set as an eyebrow. Small, tracked out, phosphor.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/label.json
Pagination ui

Page numbers as joined cells, so a run of them reads as one control.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/pagination.json
Popover ui

A bordered panel anchored to its trigger.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/popover.json
Progress ui

Three pixels of track and a light in it. Pass `indeterminate` for a segment that sweeps and leaves.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/progress.json
Radio Group ui

Terminal-style radio marks in their unchecked and checked states: `( )` and `(•)`.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/radio-group.json
Resizable ui

Panels split by a hairline that lights when you take hold of it.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/resizable.json
Scroll Area ui

A hairline track and a square thumb, in place of the operating system's own.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/scroll-area.json
Select ui

A trigger that reads as a field, and a list whose chosen row carries a lit left edge.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/select.json
Separator ui

One pixel of the border color, horizontal or vertical.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/separator.json
Sheet ui

A drawer from any of the four edges. The edge it slides from keeps a lit border.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/sheet.json
Skeleton ui

Placeholder rows in dim phosphor.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/skeleton.json
Slider ui

A hairline track, a lit range, and a square handle. Single value or range.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/slider.json
Spinner ui

A lit pixel travelling a 3x3 grid, four brightness levels trailing behind it.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/spinner.json
Switch ui

A squared-off rocker in two sizes.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/switch.json
Table ui

A manifest in mono with hairline rules. `is-numeric` gives a cell amber tabular figures.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/table.json
Tabs ui

Two variants: joined segments and a quieter line.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/tabs.json
Textarea ui

A multiline field that grows with its content.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/textarea.json
Toast ui

Sonner alerts that blink into place with a border, tint and icon for each tone.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/toast.json
Toggle ui

A button that stays down.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/toggle.json
Toggle Group ui

Toggles joined the way the segmented tabs are.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/toggle-group.json
Tooltip ui

A compact label with one lit edge and no arrow.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/tooltip.json
Alarm Button component

Two flashes and a rest, the way a warning lamp blinks. Pointing at it stops the flashing.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/alarm-button.json
Boot Log component

A self test that prints itself line by line, at its final height from the first frame.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/boot-log.json
Caret component

A blinking block that follows the surrounding font size.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/caret.json
Connector component

A rule extending left or right from a heading.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/connector.json
Eyebrow component

The tracked-out line above a heading, with an optional block caret.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/eyebrow.json
LED component

A status lamp and the line it sits in. Four tones, and the idle one holds still.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/led.json
Prompt component

A shell line. Sigil, field and caret share one row with no border between them.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/prompt.json
Scanlines component

The glass. Two densities, a multiply blend, and a fixed mode for putting a whole page behind one sheet.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/scanlines.json
Screen component

A framed CRT surface. Scanlines by default, with the aperture grille, bloom, roll bar and grain opt in.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/screen.json
Shell component

A command transcript and prompt with command history. Bring the commands and their effects.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/shell.json
Terminal Window component

Window chrome in three conventions: macOS, Windows, or a slim hairline version. Resizable and collapsible.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/terminal-window.json
Date Picker block

A calendar, popover and button composed into an installable single-date picker.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/date-picker.json
Operator Dashboard block

A full-page operations dashboard with boot status, volume health, rebuild progress and a shell.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/operator-dashboard.json
Terminal Preset style

The shared theme and every registry component in one `shadcn init` preset.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/terminal.json
Use Copied hook

Writes a string to the clipboard and holds a `copied` flag for two seconds, so a control can confirm the copy.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/use-copied.json
Use Reduced Motion hook

Reads the reduced-motion query and re-reads it when the setting changes, for the effects CSS cannot switch off.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/use-reduced-motion.json
Typewriter component

A line that types itself one character at a time, at its finished width from the first frame.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/typewriter.json
Scramble component

Text resolving out of glyph soup, left to right. On mount, on hover, or when it scrolls into view.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/scramble.json
Grain component

Tube noise over anything. A static filter by default, or a capped canvas loop that pauses off screen.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/grain.json
Glitch component

Channel separation over a subtree. Two colour-shifted copies clipped into bands that jump on steps.

npx shadcn@latest add https://afterglow.thebuilder.dk/r/glitch.json