Every component rendered live from the eidotter npm package.
Each card describes usage and links to Storybook for API docs.
Buttons, text fields, toggles, and filters — components that capture input.
Text field built on React Aria TextField. Built-in label, description, and error message support. For single-line text; for a DOS command line, use CommandPrompt.
Use the label prop for visible labels. Use errorMessage for validation feedback.
Don't use placeholder text as the sole label — it vanishes on focus.
Boolean toggle built on React Aria Checkbox. DOS-style bracketed indicator with full keyboard and screen-reader support. Select multiple options independently. For a single on/off, use Switch.
Space to toggleOn/off toggle built on React Aria Switch. Takes effect instantly with visual feedback and full keyboard support. For changes that need a submit step, use Checkbox.
Tab to focus, Space to toggleHorizontal filter for lists, galleries, and data views. Optional item counts, multiple sizes. Toggle between predefined subsets. For free-form filtering, pair with Input.
Status, progress, and system state — communicated back to the user.
V.37 banner with featured icon, title, description, and action buttons. Six color variants with matched icons. Floating (card) and full-width (banner) sizes. For transient feedback, use Notification.
Match the color to the severity. Use title for the headline and children for supporting text.
Don't use alerts for transient feedback like "Saved!" — use Notification with auto-dismiss.
Toast notification with V.37 design: featured icon with outline rings, optional progress bar, and auto-dismiss. Purely presentational — consumers handle positioning. For persistent banners, use Alert.
Use for transient feedback. Set duration for auto-dismiss. Stack in a fixed container.
Don't use for persistent messages — use Alert instead.
Compact label for status, counts, and categories. Six semantic variants with optional dot. Use for non-interactive inline metadata. For clickable labels, use Tag.
Progress bar for loading, file transfers, and task completion. Labels, glow, and semantic color variants. Use determinate when you know the percentage; indeterminate when you don't.
Numeric display for KPIs, metrics, and dashboard figures. Trend indicators show directional change. Optional scramble animation on value changes. For inline counts, use Badge.
Containers, accordions, tabs, and navigation — structure for your content.
Container for grouping related content. Three variants — default, elevated, glow — establish visual hierarchy. Glow draws the eye to featured content.
Use one variant consistently within a grid. Reserve glow for a single highlighted item.
Don't nest cards — use Section for sub-groups.
Collapsible section for long-form content, settings, and FAQs. Supports default-expanded state. Compose accordion items with custom children. For data-driven sections from an array, use AccordionFill.
No network adapter detected.
Data-driven accordion rendered from an array of title/content pairs. Built for FAQs, help pages, and settings. For custom children per section, use Section.
Dialog overlay built on React Aria ModalOverlay. Focus trapping, backdrop dismiss, and Escape handling built in. CRT phosphor enter/exit animations. For non-blocking supplementary content, use InlineExpand.
Keep modal content focused on a single task. Provide a clear way to dismiss.
Don't trap reference content in a modal — use InlineExpand so users can read and work at once.
Are you sure you want to format C:\?
Static preview — see Storybook for the interactive version.
⌘K / Ctrl+K command palette overlay built on the same React Aria primitives as Modal. Generic items with keywords, scored search, full keyboard navigation. Use for keyboard-first verb access. For longer-form decisions, use Modal.
Surface high-frequency verbs the user knows by name. Keep labels imperative.
Don't use it as a generic search — it's a verb launcher, not a query tool.
Content switcher built on React Aria TabList. Two variants — underline and pills — with arrow key, Home, and End keyboard navigation. Use for parallel categories. For filtering a single list, use FilterBar.
Keep tab labels short (1-2 words). Use underline for content tabs, pills for mode switching.
Don't use tabs for sequential steps — that implies a wizard, not navigation.
Underline (default)
Pills variant
Navigation trail showing the current location in a hierarchy. Back arrows and parent links included. Use on any page deeper than two levels.
Responsive navigation bar with desktop and mobile views. Active state highlighting, custom link components for framework routers. Use DesktopNav and MobileNav for granular control.
Retro variant (default)
Modern variant
Sticky site header with branding slot and responsive navigation. Includes built-in DesktopNav and MobileNav (hamburger on mobile). Retro and modern variants.
This site's header is a live Header component — scroll up to see it.
Visual divider between content sections. Horizontal by default, vertical when needed. Uses theme accent color at reduced opacity.
Use between logical sections of content to create breathing room.
Don't stack separators or use between every element — let spacing do that work.
Site footer with legal links (Impressum, Privacy, Terms). Renders a compact bar at the bottom of the page. Accepts custom link arrays.
Place once in your layout. Pass legal links relevant to your jurisdiction.
Don't duplicate footer content — use the component's link props.
The footer at the bottom of this page is a live Footer component.
Text, code, icons, and inline content — displayed and interactive.
Framed terminal window for command output, code snippets, and system info. Title bar, optional scrolling. Read-only — for interactive command entry, pair with CommandPrompt.
Text input styled as a DOS command line. Fires a callback on Enter. Use for command-driven interfaces and demos. For standard form fields, use Input.
Enter to submit commandClick a highlighted phrase to expand its explanation in place. Use for definitions, tooltips, and glossary terms in prose. For collapsible sections, use Section. For destination links, use InlineLink.
eiDotter ships
In-flow navigational anchor. Dotted amber underline, phosphor-invert hover, trailing ▸ for internal and ↗ for external. External variant adds safe rel="noopener noreferrer"; href is sanitized against unsafe schemes. Use for destinations in prose. For inline disclosures, use InlineExpand.
Read more in the component categories, browse the Storybook, or check the repository.
Demoscene-style painted-screen placeholder for media — Sierra / LucasArts title-card aesthetic. Amber chrome, scanline sweep, optional annotation pins at {x, y} percentages, resolution tag. Animations honor prefers-reduced-motion and prefers-contrast. Use for screenshots, demo media, and figure framing.
Keyword label for categorization, filtering, and metadata. Supports selection state for filter patterns. Use for clickable or removable labels. For read-only status, use Badge.
Wraps multiple Tags with consistent spacing and ARIA roles. Use for tag clouds, tech stacks, and multi-select groups. Always use TagGroup over manual layout.
Scrambles through random characters before resolving to the final string. Configurable speed and delay. Use sparingly — best on short headings and status lines, not paragraphs.
Icons backed by pixelarticons (MIT). Authentic DOS pixel art SVGs that scale to any size and inherit text color. Pair with labels for clarity; when standalone, add aria-label.
Events, milestones, and versions plotted along a time axis.
Single timeline marker. Three shapes (circle, square, diamond) and three sizes. Use standalone for milestones, or within TimelineContainer for an interactive timeline.
Unified timeline with two modes. Interactive: zoomable horizontal timeline with year, month, day, and hour zoom levels, scroll and keyboard navigation. Static: vertical feed for changelogs and activity logs. Feed entries as a data array with date, title, and optional metadata.
Use interactive mode for exploratory timelines. Use static mode for read-only feeds and changelogs.
Don't use interactive mode for simple lists — static mode is lighter and more readable.
Interactive mode (default)
Static mode (vertical feed)
Static previews — see Storybook for interactive zoom and keyboard controls.
Presentational messaging components — no AI SDK dependency. Compose inside Terminal for a DOS chat window.
Single chat bubble with role-based styling. User messages get the prompt prefix, assistant messages get the system prefix. Pure presentational — bring your own state.
Use inside ChatHistory or a custom list. Set role to "user", "assistant", or "system".
Don't use for non-chat content — use Alert or Card instead.
Overlays and animations that bring CRT character to any page.
Full-page CRT overlay: scanlines, phosphor glow, and flicker. Drop it in once at the layout level — renders as a fixed overlay. Honors prefers-reduced-motion.
The scanlines, glow, and flicker on this page come from the
RetroEffects component — a fixed CSS overlay.