UI Components

Badge

Inline label with outlined, solid, ghost, and minimal variants.

Button

Action button with solid, outlined, ghost, and minimal variants.

Card

Composable container with optional action area, image, and content sections.

Code

Inline code with size and color options.

CodeBlock

Syntax-highlighted code block with copy button and collapsible overflow.

Container

Layout wrapper with consistent max-width and responsive padding. Supports full-bleed backgrounds with theme control.

Dialog

Pre-styled compound dialog built on Base UI. Handles backdrop, portal, animations, and accessible title.

Divider

Horizontal and vertical separator line.

Heading

Semantic heading with configurable element, size, color, and weight.

Icon Button

Square icon-only button. Automatically wraps in a Tooltip when aria-label is provided.

Icons

SVG icons built on a shared IconBase component. Sized to 1em by default so they scale with text.

Image

Thin wrapper around Next.js Image. Always provide width + height or use fill with a positioned parent.

Input

Input, Textarea, and Select with label, hint, error, and size variants.

List

Styled list with dash and numbered marker options.

Link

Next.js Link wrapper with variant and color options. Renders as a button when no href is provided.

Loader

Animated spinner used internally by Button when loading. Can also be used standalone.

Logo

Brand text logo. Swap the contents with your SVG. No link wrapper — add your own where needed.

Nav

Independent building blocks for navigation menus. Compose them inside any <nav> element.

Pagination

Controlled page navigation component.

Popover

Floating panel with controlled open state and auto-close support.

Switch

Toggle switch built on Base UI. Supports controlled and uncontrolled modes with optional label.

Toggle

A two-state button that can be pressed or unpressed. Built on Base UI Toggle. Compose with Button or IconButton for styling.

Text

Body text with size and color scales plus a subtle opacity option.

Tooltip

Used internally by IconButton when aria-label is provided. Can also be used directly.