Components · 79
The full catalog..
79 copy-paste components covering every surface a modern CLI touches — prompts and spinners, tables and dashboards, animations and effects. Nothing depends on a framework.
Interactive · 13
Ask, confirm, choose, collect.
^ P R O J E C T N A M E
Used as the package name
▸ acme-cli
promptThe one prompt that scales from text to multi-select.
Interactive Building packages…
✓ Compile assets · 1.2s
✗ Publish · 4.8s
spinnerLong-running tasks with success and failure states.
Interactive^ N A M E
▸ acme-cli
^ L I C E N S E
▸ MIT
^ P R I V A T E
▸ no
formChain prompts into a single structured result.
Interactive┌─ confirm ──────────────────┐
│ Delete 3 files? │
│ │
│ [ Cancel ] [ Delete ] │
└────────────────────────────┘
modalBordered confirmation dialog with actions.
Interactive▸ Overview · Config · Logs
←→ navigate · ↵ select · esc cancel
tabsTab bar navigation with ←/→ selection.
Interactive^ Dark mode ● on
^ Telemetry ○ off
toggleBoolean on/off switch with space to toggle.
Interactive▸ General
│ Name: my-app
│ Version: 1.0.0
· Advanced
· About
accordionCollapsible sections for grouped content.
Interactive^ Volume ━━━━━━━━━━╸────────── 50
←→ adjust · ↵ confirm · esc cancel
sliderNumeric range input with ←/→ adjustment.
Interactive~/projects/acme-cli
▸ src/
· package.json
· tsconfig.json
· README.md
filePickerInteractive file and directory browser.
Interactive▸ buil 3/12
Tasks
▸ Build project
· Build for production
· Build Docker image
commandPaletteFuzzy command search with grouped results.
Interactive╭──────────────╮
│ ▸ Edit │
│ · Duplicate │
│ ──────────── │
│ · Delete │
╰──────────────╯
contextMenuBordered action menu with separator support.
Interactive▸ api-gateway running
· auth-service running
· billing-svc failed
· cache-layer running
· data-worker stopped ▎
virtualizedListWindowed scrollable list for large datasets.
Interactive✓ Saved · 2s ago
ℹ New version available
✗ Lost connection
toastTransient notification with an icon and label.
InteractiveDisplay · 22
Structured state, status, results.
^ M Y - C L I
v2.0.0 — production
────────────────────────
bannerFramed title above the first interaction.
Display✗ error: missing required flag '--output'
│
│
│ hint: pass --output=./dist or set caret.outDir
│ see: https://caret.dev/docs/errors/E102
errorA full error block with hint and docs link.
Display✓ Install dependencies
✓ Compile assets
● Run unit tests
○ Deploy to edge
stepOrdered task list with live state.
DisplayBuild ━━━━━━━━━━━╸──── 72%
Upload ━━━━╸─────────── 34%
Deploy ━━━━━━━━━━━━━━━━ 100%
progressCharacter-grid progress bar.
DisplayNAME STATUS AGE
────────────────────
web running 3d
api running 3d
worker failed 1m
tableColumn-aligned data with optional rule.
DisplayEnvironment ···· production
Region ····· us-east-1
Build ·········· 2.3s
keyValueLeader-dotted key → value pairs.
Display• Authentication — Sign in with email
• Database — PostgreSQL on Neon
• Deploy — Vercel edge
listBulleted or numbered items with descriptions.
Displayapps
├─ landing
│ ├─ app
│ └─ components
└─ cli
└─ src
treeFile-system style hierarchical tree.
Display@@ -3,4 +3,4 @@
import { cli } from 'caret'
- const app = cli('my-cli')
+ const app = cli('acme-cli')
app.run()
diffUnified diff with add/remove coloring.
DisplayRead more at caret.dev/docs
Open issue github.com/caret/cli#42
linkAccent-underlined URL with OSC 8 support.
Display⚠ Deprecated
`config.v1` will be removed in v3.0.
Migrate to `caret.config.ts`.
alertFull-width info/warning/danger panels.
Display[x] Install CLI
[x] Run `caret init`
[ ] Copy your first component
[ ] Ship it
checklistStatic list of done/pending items.
Display● api · ● web · ● worker · us-east-1
statusLineInline segmented status bar.
Displayhome › projects › acme-cli
breadcrumbPath-style navigation across screens.
Displayuser › build me a landing page
assistant › Done. Preview on :3000.
user › ship it
chatRole-tagged conversation transcript.
DisplayUsage: caret <command> [options]
Commands
init scaffold a new project
add copy a component
diff compare registry versions
helpAuto-formatted CLI help screen.
Displaybuilds 1.2k ↑12% errors 4 ↑2
uptime 99.98% → p95 142ms ↓8ms
statsRow of KPI numbers with trend glyphs.
Display10:02 ● deploy succeeded
09:48 ● build started
09:41 ● cache miss
09:40 ● pr merged
timelineChronological events with kinds.
DisplayA P R I L 2 0 2 6
Mo Tu We Th Fr Sa Su
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
calendarMonth-view calendar with today and marked date highlights.
DisplayMon ░░ ▒▒ ▓▓ ██ ▒▒
Tue ▒▒ ▓▓ ██ ▓▓ ░░
Wed ▒▒ ▓▓ ▓▓ ██ ░░
heatmapGrid-based heatmap with block intensity levels.
Display{
"name": "caret",
"version": 1,
"tags": ["cli", "ui"]
}
jsonViewerSyntax-highlighted formatted JSON display.
Display┌──────────┬──────────┐
│ requests │ latency │
│ 12.4k │ 142ms │
├──────────┼──────────┤
│ errors │ uptime │
│ 4 │ 99.98% │
└──────────┴──────────┘
dashboardMulti-cell grid dashboard frame.
DisplayMessages · 4
Single-line semantic statements.
ℹ info: Cache cleared. 128 files removed.
infoNeutral informational line.
Messages✓ success: Build complete in 2.3s
successSuccess confirmation line.
Messages⚠ warning: Deprecated config syntax
warningNon-fatal warning line.
Messagesdebug: parsing caret.config.ts
debug: resolved 14 components
debug: theme = dark-default
debugDimmed debug trace line.
MessagesText · 6
Prose, code, inline typography.
Caret gives your CLI a consistent voice
across prompts, spinners, tables, and
errors — without shipping a framework.
paragraphWrapped prose with grid-safe line breaks.
Text│ Design is how it works —
│ not how it looks.
│ — s. jobs
quoteSide-barred pull quote.
TextRun `caret add spinner` to copy it.
Then import from `@/cli/spinner`.
codeInline code span in accent.
Text─ bash ──────────────────
│ npm install caret-cli
──────────────
snippetCode block with copy-to-clipboard affordance.
Text1 │ import { spinner } from 'caret'
2 │
3 │ await spinner('Building…',
4 │ () => build())
codeBlockFramed multi-line code with gutter numbers.
Text# Getting started
Install the CLI:
```
npx caret init
```
markdownRenders a subset of Markdown in the terminal.
TextData viz · 7
Numbers rendered as glyphs.
cpu ▂▃▅▇▆▄▃▅▇█▇▅
mem ▁▁▂▃▃▄▄▅▅▆▆▇
reqs ▇▆▅▄▃▂▁▂▄▆▇█
sparklineCompact braille trend line.
Data viz100 │ ⣠⣶⣿
75 │ ⢀⣴⣿⣿⣿
50 │ ⣀⣼⣿⣿⣿⣿⣿
25 │ ⣠⣾⣿⣿⣿⣿⣿⣿⣿
0 └──────────────
brailleChartHigher-resolution braille line/bar chart.
Data vizCPU ████████████ ░░░░░░░░ 62%
MEM ████████████████ ░░░░ 81%
DISK ██████ ░░░░░░░░░░░░░░ 33%
gaugeSingle metric dial rendered with blocks.
Data viz speed
●
╱ ╲
reach ● ● ux
╲ ╱
●
cost
radarPolar chart for small multivariate sets.
Data viz▂▄▆█▆▅▃▂▁▂▃▅▆█▇▅▃▁
·················
▂▄▆█▆▅▃▂▁▂▃▅▆█▇▅▃▁
waveformSymmetric audio-style waveform.
Data viz████████████████████ main
████████████████ render
██████████ layout
█████ measure
flamegraphStacked CPU/profile flamegraph.
Data viz█▀▀▀▀▀█ ▄▀█ █▀▀▀▀▀█
█ ███ █ ▀█▀ █ ███ █
█ ▀▀▀ █ ▄ ▄ █ ▀▀▀ █
▀▀▀▀▀▀▀ ▄ █ ▀▀▀▀▀▀▀
█▄▀▀█▀▀▄▀ ▀ █▄▀ ▄ ▀
qrcodeBlock-character QR code.
Data vizAnimation · 11
Reveals, boots, typewriters.
^ CARET
design system for CLIs
press any key
splashFull-screen opening logo with tagline.
Animation ██████ █████ ██████ ███████ ████████
██ ██ ██ ██ ██ ██ ██
██ ███████ ██████ █████ ██
██ ██ ██ ██ ██ ██ ██
██████ ██ ██ ██ ██ ███████ ██
logoGradient-ready ASCII logo.
AnimationHello, world▎
Welcome to Caret…
typewriterCharacter-by-character text reveal.
AnimationAnalyzing your project▎
14 components found.
smartTypewriterTypewriter with natural speed profiles.
AnimationThe design system
for modern
command-line tools.
revealPer-line reveal with fade-in dim.
Animation[ OK ] loading config
[ OK ] resolving components
[ OK ] starting spinner
[ .. ] mounting renderer
bootStaged boot sequence with OK/ERR markers.
AnimationDeploying in 3…
Ctrl+C to cancel
countdownCounting down seconds before an action.
Animation████████████████
██████████
█████████████
███████
skeletonDim placeholder blocks while loading.
Animationloading…
l█ading█
ready ✓
morphMorphs one string into another character by character.
Animation⣿⣿⣿⣿⡿⠿⠛⠋
⣿⣿⡟⠋⠁
fading…
brailleTransitionBraille-based fade between screens.
AnimationCaret • modern CLIs
gradientApplies an accent gradient across text.
AnimationEffects · 6
Ambient, celebratory, atmospheric.
confettiTerminal-native confetti burst.
EffectsfireworksScreen-sized burst with trailing sparks.
Effects ✓
celebrateCombined confetti + message celebration.
EffectsmatrixThe Matrix digital rain, in accent.
Effects READY
particlesText explode and reassemble.
Effects⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
gameOfLifeConway's Game of Life running in the corner.
EffectsLayout · 6
Framing, sectioning, space.
╭─ Config ──────────────╮
│ region: us-east-1 │
│ replicas: 3 │
│ cache: enabled │
╰───────────────────────╯
panelBordered container with optional title.
LayoutBuild output
Compiling TypeScript… ▎
Bundling 14 modules… ▎
Minifying assets…
Writing dist/index.js
↑↓/jk scroll q quit 42L 68%
scrollableScrollable viewport container with indicator.
LayoutSource │ Output
const x = 1 │ > Building…
const y = 2 │ > Compiled.
export {x, y} │ > Done ✓
splitPaneSide-by-side scrollable layout.
Layout──────────────────────────
───── S E C T I O N ──────
──────────────────────────
dividerHorizontal rule with optional tracked label.
Layoutfirst block
· · ·
second block
spaceTyped vertical spacer.
Layout$ caret clear
───────────────
(screen cleared)
clearClear the terminal surface.
LayoutUtility · 4
Smaller glue and building blocks.
[GY] Görkem Yıldız
[AC] Alice Carter
[BM] Bob Martinez
avatarInitials-based user representation.
Utility[beta] [passing] [slow] [failed]
[new] [archived]
badgeSmall inline colored label.
Utility[Ctrl]+[K] open command palette
[Ctrl]+[C] cancel
[Enter] confirm
kbdKeyboard key combinations.
Utility2026-04-09 10:42:18
2 minutes ago
in 3 days
timestampFormatted timestamps and relative time.
UtilityGet started
Copy the ones you need..
Every component is a single file. No runtime, no framework.