Midnight Terminal

Every variant and size, plus icon and disabled states.

A two-state button that can be toggled on or off.

A set of two-state buttons that can be toggled together.

A date field component that lets users pick and edit dates.

A control that toggles between checked and unchecked.

Composable form fields with react-hook-form and zod validation.

A form input field, with disabled and file states.

Accessible one-time password input with copy-paste support.

An accessible label associated with a control.

A set of checkable buttons where only one can be selected.

A listbox-style dropdown for picking a single value.

An input where users select a value from a given range.

A control that toggles between on and off.

A multi-line text input field.

Vertically stacked, collapsible content sections.

Constrains content to a fixed width-to-height ratio.

An image element with fallback, plus grouped avatars.

A small status descriptor in four variants.

Surface container with header, content, action, and footer.

A slideshow built on Embla with previous and next controls.

Recharts wrapped with theme-aware config and tooltip.

Visually or semantically separates content.

Placeholder shapes shown while content loads.

A responsive table with caption, header, and rows.

A callout for user attention, in default and destructive variants.

An indicator showing task completion progress.

Opinionated toast notifications via Sonner.

Shows the path to the current page with links and ellipsis.

A persistent desktop-app style menu bar.

A collection of links with hover-triggered content panels.

Page navigation with previous, next, and ellipsis.

A composable app sidebar, embedded here in non-collapsible mode.

Layered panels of content shown one at a time.

A modal that interrupts the user for confirmation.

A cmdk-powered command palette, rendered inline.

A menu shown on right-click.

A modal window overlaid on the page.

A vaul-powered drawer that slides from the bottom.

A menu of actions triggered by a button.

Preview content behind a link on hover.

Floating content anchored to a trigger.

A panel that slides in from the edge of the screen.

A short hint shown on hover or focus.

Expands and collapses a panel of content.

Keyboard-accessible resizable panel groups.

A styled, cross-browser scrollable area.