---
name: "@afterglow"
slug: "afterglow"
description: "A complete terminal UI system for shadcn with Base UI components, terminal-specific building blocks, and eight phosphor color themes."
category: "Animated components"
tags: ["ai", "animation", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "forms", "hooks", "loaders", "media", "navigation", "overlays", "retro", "tables", "text-effects", "theming"]
framework: "react"
license: null
author: "thebuilder"
website: "https://afterglow.thebuilder.dk"
github: "https://github.com/thebuilder/afterglow"
registry: "https://afterglow.thebuilder.dk/r/registry.json"
pro: false
pro_url: null
github_stars: 5
component_count: 62
generated_at: "2026-09-05T09:50:59.044Z"
---

# @afterglow

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

## Links

- Website: https://afterglow.thebuilder.dk
- GitHub: https://github.com/thebuilder/afterglow
- Registry JSON: https://afterglow.thebuilder.dk/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/afterglow
- This file: https://sh4dcn.vercel.app/md/afterglow.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://afterglow.thebuilder.dk/r/registry.json
pnpm dlx shadcn@latest add https://afterglow.thebuilder.dk/r/registry.json
bunx shadcn@latest add https://afterglow.thebuilder.dk/r/registry.json
# clone the source repo
git clone https://github.com/thebuilder/afterglow.git
# fetch the raw registry index
curl -s https://afterglow.thebuilder.dk/r/registry.json
```

## Components (62)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | The tokens, typography, motion and CRT effects used by every component. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/theme.json` |
| accordion | registry: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 | registry: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 | registry:ui | A pink confirmation dialog for destructive or irreversible actions. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/alert-dialog.json` |
| avatar | registry:ui | Initials in mono inside a bordered square. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/avatar.json` |
| badge | registry: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 | registry: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 | registry: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 | registry: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 | registry:ui | A panel with a colored left edge. One `accent` property drives both the edge and the title. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/card.json` |
| chart | registry: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 | registry: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` |
| collapsible | registry: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` |
| command | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-otp | registry: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 | registry: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 | registry: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 | registry: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 | registry:ui | A bordered panel anchored to its trigger. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/popover.json` |
| progress | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:ui | One pixel of the border color, horizontal or vertical. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/separator.json` |
| sheet | registry: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 | registry:ui | Placeholder rows in dim phosphor. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/skeleton.json` |
| slider | registry: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 | registry: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 | registry:ui | A squared-off rocker in two sizes. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/switch.json` |
| table | registry: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 | registry:ui | Two variants: joined segments and a quieter line. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/tabs.json` |
| textarea | registry:ui | A multiline field that grows with its content. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/textarea.json` |
| toast | registry: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 | registry:ui | A button that stays down. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/toggle.json` |
| toggle-group | registry:ui | Toggles joined the way the segmented tabs are. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/toggle-group.json` |
| tooltip | registry:ui | A compact label with one lit edge and no arrow. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/tooltip.json` |
| alarm-button | registry: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 | registry: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 | registry:component | A blinking block that follows the surrounding font size. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/caret.json` |
| connector | registry:component | A rule extending left or right from a heading. | `npx shadcn@latest add https://afterglow.thebuilder.dk/r/connector.json` |
| eyebrow | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-reduced-motion | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @afterglow to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/afterglow.md) for the component list.
2. Fetch the machine-readable index: https://afterglow.thebuilder.dk/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: afterglow).
```