React Components

A nested checklist for picking the right component when several feel "close enough." Use this before you reach for shadcn/ui, MUI, Headless UI, React Native Pap

A clickable element that triggers actions — the most fundamental interactive component in any application.

An overlay dialog that appears on top of the page content to capture user attention for confirmations, forms, or important information.

A container component with structured layout for displaying grouped content such as previews, summaries, or list items.

A collapsible content panel component for showing and hiding sections of related content, reducing visual clutter while keeping information accessible.

A component for switching between different content panels within the same view, keeping related content organized without page navigation.

A brief, auto-dismissing notification that appears at the edge of the screen to inform users of the result of an action without interrupting their workflow.

A floating panel of actions or options that appears on button click and closes when the user selects an item or clicks outside.

A small floating label that appears on hover or focus to provide supplementary information about an element without cluttering the interface.

A form field for capturing user text input, supporting labels, validation states, and various input types.

Displays a user's profile image with an initials fallback when no image is available, commonly used in navigation bars, comment threads, and user lists.

A small label used to display status indicators, categories, counts, or tags alongside other content.

A placeholder loading shape that mimics the layout of content before it loads, reducing perceived load time and preventing layout shift.

A vertical navigation panel that sits alongside main content, providing persistent access to top-level routes and sections in an application layout.

A horizontal trail of links showing the user's current location within the navigation hierarchy, enabling quick traversal back to parent pages.

A control for navigating between pages of content, allowing users to move through large datasets or content collections in manageable chunks.

A multi-line text input for capturing longer content such as comments, descriptions, or messages. Shares styling conventions with the Input component for visual

A dropdown selector for choosing from a list of options. Supports native browser select behavior for accessibility and mobile compatibility, with custom variant

A toggle for boolean values, used individually for opt-in controls or in groups for multi-selection. Built with native checkbox inputs and Tailwind styling for

A set of mutually exclusive radio buttons for selecting one option from a group. Uses native radio inputs with shared name attributes for built-in keyboard navi

An on/off toggle control that visually represents a boolean state, commonly used for settings, preferences, and feature flags.

An accessible text label that pairs with form controls via htmlFor, providing clear identification and click-to-focus behavior for inputs, selects, and other in

A range input for selecting numeric values along a track, providing a visual and interactive way to choose a value within a defined min/max boundary.

A segmented control where one or more options can be selected from a row of buttons, commonly used for view switchers, filters, and compact option pickers.

A simple horizontal or vertical divider line used to visually separate sections of content or groups of related elements.

AspectRatio component recipe for React — maintain consistent width-to-height ratios for images, videos, and embeds with shadcn/ui and radix-ui.

A scrollable container with a custom-styled scrollbar that replaces the browser's native scrollbar, providing a consistent look across operating systems and bro

Popover component recipe for React — radix-ui primitives, shadcn/ui patterns, positioning, dismiss behavior, and accessibility.

Alert component recipe for React — status messages, variants, icons, and accessibility with shadcn/ui and radix-ui primitives.

A CodeGroup MDX component that shows one concept across synchronized, memory-preserving tabs -- ideal for multi-surface ecosystems like Solana, Node, and Rust.