Resolver-backed primitives for accessible disclosure, forms, overlays, navigation, and layout details.
Choose the right primitive family, then move to the component route that matches the job. Exact props and child-part contracts stay in SDK package reference.
Start here when you need a primitive or resolver-backed building block, but still need to choose the right component route.
Common jobs:
- buttons, tabs, inputs, selects, checkboxes, and labels
- overlays and disclosure such as dialogs, sheets, tooltips, popovers, and accordions
- navigation and small structure helpers such as breadcrumbs, pagination, separators, and cards
- app-specific composition where you are building your own surface instead of using a storefront or commerce page pattern
Switch routes when the question is broader than a primitive chooser:
- I need storefront sections or editorial page assembly -> Storefront components and Storefront page guide
- I need product, cart, Search, PDP, or checkout-adjacent UI -> Commerce components, Product listing and search, and Product detail page
- I need headers, footers, menus, or shell chrome -> Layout components
- I need exact props, child parts, or runtime behavior -> SDK package reference
Import components from @enadhq/enad-react-sdk/client/ui-resolver.
Use these as common starting points when you already know the primitive category. The full component list below remains the canonical route inventory for this family:
- Forms and input controls -> Input, Label, Checkbox, Select, Toggle, ToggleGroup
- Disclosure and overlays -> Accordion, Collapsible, Dialog, HoverCard, Popover, Sheet, Tooltip
- Navigation and wayfinding -> Breadcrumb, NavigationMenu, Pagination, Tabs, Stepper
- Layout and presentation helpers -> Alert, Avatar, Button, Card, Carousel, Icon, Progress, Separator
Open the live playground category at sdk.enad.io/components/base-ui when you need runtime experimentation or visual verification after you choose a component route.
Base UI components
# Base UI components
Resolver-backed primitives for accessible disclosure, forms, overlays, navigation, and layout details.
> Choose the right primitive family, then move to the component route that matches the job. Exact props and child-part contracts stay in SDK package reference.
## When to use this family
Start here when you need a primitive or resolver-backed building block, but still need to choose the right component route.
Common jobs:
- buttons, tabs, inputs, selects, checkboxes, and labels
- overlays and disclosure such as dialogs, sheets, tooltips, popovers, and accordions
- navigation and small structure helpers such as breadcrumbs, pagination, separators, and cards
- app-specific composition where you are building your own surface instead of using a storefront or commerce page pattern
## When to switch routes
Switch routes when the question is broader than a primitive chooser:
- **I need storefront sections or editorial page assembly** -> [Storefront components](/react-sdk/latest/components/storefront) and [Storefront page guide](/react-sdk/latest/guides/storefront-page)
- **I need product, cart, Search, PDP, or checkout-adjacent UI** -> [Commerce components](/react-sdk/latest/components/commerce), [Product listing and search](/react-sdk/latest/guides/product-listing-search), and [Product detail page](/react-sdk/latest/guides/product-detail-page)
- **I need headers, footers, menus, or shell chrome** -> [Layout components](/react-sdk/latest/components/layout)
- **I need exact props, child parts, or runtime behavior** -> SDK package reference
## Public import path
Import components from @enadhq/enad-react-sdk/client/ui-resolver.
## Common starting points in this family
Use these as common starting points when you already know the primitive category. The full component list below remains the canonical route inventory for this family:
- **Forms and input controls** -> Input, Label, Checkbox, Select, Toggle, ToggleGroup
- **Disclosure and overlays** -> Accordion, Collapsible, Dialog, HoverCard, Popover, Sheet, Tooltip
- **Navigation and wayfinding** -> Breadcrumb, NavigationMenu, Pagination, Tabs, Stepper
- **Layout and presentation helpers** -> Alert, Avatar, Button, Card, Carousel, Icon, Progress, Separator
## Component docs
- [Accordion](/react-sdk/latest/components/base-ui/accordion) - Accordion
- [Alert](/react-sdk/latest/components/base-ui/alert) - Alert
- [Avatar](/react-sdk/latest/components/base-ui/avatar) - Avatar
- [Breadcrumb](/react-sdk/latest/components/base-ui/breadcrumb) - Breadcrumb
- [Button](/react-sdk/latest/components/base-ui/button) - Button
- [Card](/react-sdk/latest/components/base-ui/card) - Card
- [Carousel](/react-sdk/latest/components/base-ui/carousel) - Carousel
- [Checkbox](/react-sdk/latest/components/base-ui/checkbox) - Checkbox
- [Collapsible](/react-sdk/latest/components/base-ui/collapsible) - Collapsible
- [Dialog](/react-sdk/latest/components/base-ui/dialog) - Dialog
- [HoverCard](/react-sdk/latest/components/base-ui/hover-card) - HoverCard
- [Icon](/react-sdk/latest/components/base-ui/icon) - Icon
- [Input](/react-sdk/latest/components/base-ui/input) - Input
- [Label](/react-sdk/latest/components/base-ui/label) - Label
- [NavigationMenu](/react-sdk/latest/components/base-ui/navigation-menu) - NavigationMenu
- [Pagination](/react-sdk/latest/components/base-ui/pagination) - Pagination
- [Popover](/react-sdk/latest/components/base-ui/popover) - Popover
- [Progress](/react-sdk/latest/components/base-ui/progress) - Progress
- [Select](/react-sdk/latest/components/base-ui/select) - Select
- [Separator](/react-sdk/latest/components/base-ui/separator) - Separator
- [Sheet](/react-sdk/latest/components/base-ui/sheet) - Sheet
- [Stepper](/react-sdk/latest/components/base-ui/stepper) - Stepper
- [Tabs](/react-sdk/latest/components/base-ui/tabs) - Tabs
- [Toggle](/react-sdk/latest/components/base-ui/toggle) - Toggle
- [ToggleGroup](/react-sdk/latest/components/base-ui/toggle-group) - ToggleGroup
- [Tooltip](/react-sdk/latest/components/base-ui/tooltip) - Tooltip
## Playground
Open the live playground category at [sdk.enad.io/components/base-ui](https://sdk.enad.io/components/base-ui) when you need runtime experimentation or visual verification after you choose a component route.