Theme Playground

Base UI

Foundational UI primitives built on Radix UI and styled with slot recipes

26 components

Accordion

Composable accordion primitives for collapsible content sections. Use it for FAQ blocks, product specifications, and any content that benefits from progressive disclosure.

Alert

Inline notice for validation feedback, status messages, and lightweight system warnings.

Avatar

Identity primitive for profile photos, initials, and fallback placeholders.

Breadcrumb

Hierarchical navigation trail for showing the current page within a larger catalog, content tree, or account area.

Button

Flexible action button with solid, outlined, and link-style variants in multiple sizes. Use built-in variants for standard storefront actions, then layer semantic color props when campaign or editorial surfaces need stronger tone control.

Card

Structured content container with header, content, and footer slots. Use it for product info panels, checkout summaries, account settings blocks, and order reviews.

Carousel

Swipeable content rail with previous and next controls. Use it for product galleries, testimonial rails, editorial highlights, and any horizontally scrollable content.

Checkbox

Boolean control for forms, preference lists, and bulk-selection states. Supports checked, unchecked, and indeterminate states.

Collapsible

Progressive-disclosure primitive for optional details and advanced controls.

Dialog

Modal overlay for confirmations, edit forms, and detail views. Interrupts the page with a centered panel that requires a deliberate action to dismiss.

HoverCard

Hover and focus preview surface for richer context tied to a nearby trigger.

Icon

Semantic icon primitive for rendering the SDK's shared icon slots through EnadProvider.

Input

Text input field for forms, search, and inline editing. Comes in outlined and plain variants with support for leading and trailing decorators.

Label

Accessible text label for form controls. Pair it with htmlFor and compose it with required markers, helper text, or grouped field layouts.

NavigationMenu

Horizontal navigation system with optional dropdown panels for grouped links, featured destinations, and mega-menu style layouts.

Pagination

Page navigation for large result sets. Compose previous, next, numbered links, and ellipses to match the amount of available content.

Popover

Floating panel anchored to a trigger for small contextual forms, filter controls, and lightweight settings that should not interrupt the full page.

Progress

Linear progress indicator for flows with a clear measurable completion value.

Select

Composable Radix-based single-select primitive with a styled trigger, grouped items, and popover content. Use it when you need a fully custom dropdown rather than a native select element.

Separator

Low-emphasis divider for separating content, controls, and grouped actions.

Sheet

Edge-mounted sliding panel for cart drawers, mobile navigation, filter panels, and settings that should stay visible alongside the page.

Stepper

Sequential progress primitive for checkout, onboarding, and staged workflows.

Tabs

Tabbed content panels for organizing related sections without navigating to a new page. Use it for product detail tabs, account settings, and category content.

Toggle

Pressable on and off control for independent state changes.

ToggleGroup

Coordinated set of toggles for single-choice and multi-choice selection patterns.

Tooltip

Short assistive hint shown on hover or focus. Best for icon-only actions and places where inline helper text would be too noisy.