Base UI components

Resolver-backed primitives for accessible disclosure, forms, overlays, navigation, and layout details.

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:

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

Playground

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.