Themes/Theme SDK/Modules/ui

ui

Generic interface primitives, class merging and DOM hooks.

On this page

import { … } from '@poltura/theme-sdk/ui';

Hooks

Name	What it is
`useMediaQuery`	Whether the browser's viewport matches a media query; false on the server and while hydrating.
`useInView`	A reveal-on-scroll flag for an entrance animation; it starts true so content never stays hidden.
`useSnapCarousel`	Drives a CSS scroll-snap track: autoplay, the active slide and the controls behind dots or thumbnails.
`useRovingTabs`	Arrow, Home and End key handling for a tablist whose selected tab alone is in the tab order.

Parts

Name	What it is
`Button`	A button in the store's primary, secondary, outline, ghost, link or destructive look.
`Badge`	A small label for a status, count or tag.
`Card`	A bordered surface that groups related content.
`CardHeader`	The top part of a `Card`, holding its title and description.
`CardTitle`	The heading of a `Card`.
`CardDescription`	The muted supporting line under a `CardTitle`.
`CardContent`	The main body of a `Card`.
`CardFooter`	The bottom row of a `Card`, for actions.
`Input`	A single-line text field.
`Label`	The visible name of a form field, tied to it with `htmlFor`.
`Textarea`	A multi-line text field.
`Checkbox`	A checkbox in the store's colours, tied to its `Label` with `id` and `htmlFor`.
`Select`	A dropdown that picks one value from a list; compose it with its trigger, value and items.
`SelectTrigger`	The button of a `Select` that shows the chosen value and opens the list.
`SelectValue`	The chosen item's text, or a placeholder, inside a `SelectTrigger`.
`SelectContent`	The popover list of a `Select`, holding its items.
`SelectItem`	One choice inside a `SelectContent`.
`Dialog`	A modal dialog: focus stays inside while it is open, and Escape or a click outside closes it.
`DialogContent`	The dialog's panel, centred over a dimmed page.
`DialogHeader`	The top of a dialog, holding its title and description.
`DialogFooter`	The bottom of a dialog, holding its buttons; they stack on phones.
`DialogTitle`	The dialog's title; screen readers announce it when the dialog opens.
`DialogDescription`	The line under a dialog's title; screen readers read it with the title.
`DropdownMenu`	A menu that drops from a button: arrow keys walk its items, typing jumps to one, and Escape or a click outside closes it.
`DropdownMenuTrigger`	The button that opens a `DropdownMenu`; it carries `data-state="open"` while the menu is open.
`DropdownMenuContent`	The menu's panel, drawn over the page under its button and kept inside the window.
`DropdownMenuItem`	One item of a `DropdownMenu`; with `asChild` a link becomes the item itself.
`Sheet`	A drawer that slides in from an edge of the window, such as a mobile menu or a filter panel.
`SheetContent`	The drawer's panel over a dimmed page, full height on the left and right edges.
`SheetHeader`	The top of a drawer, holding its title.
`SheetTitle`	The drawer's title; screen readers announce it when the drawer opens.
`Popover`	A panel that opens from a button over the page without dimming it; Escape or a click outside closes it.
`PopoverTrigger`	The button that opens a `Popover`; it carries `data-state="open"` while the popover is open.
`PopoverContent`	The popover's panel, drawn over the page next to its button and kept inside the window.
`Separator`	A thin line that divides content.
`Skeleton`	A pulsing placeholder block shown while content loads.
`Carousel`	A swipeable, keyboard-friendly slider; compose it with its content, items and arrows.
`CarouselContent`	The track inside a `Carousel` that holds its slides.
`CarouselItem`	One slide of a `Carousel`; add a width class such as `basis-1/3` to show several at once.
`CarouselPrevious`	The arrow that moves a `Carousel` back one step.
`CarouselNext`	The arrow that moves a `Carousel` forward one step.
`InlineError`	A field's error message, announced to screen readers and drawn only when there is one.
`Icon`	Draws an icon setting's value as inline SVG in the current text colour.
`Tooltip`	A hover and focus tooltip that renders only its child on the server, so it never breaks hydration.
`PageLinks`	Links to the neighbouring and the first and last pages of a paged list.

Functions

Name	What it is
`cn`	Joins class names, skips falsy ones and resolves conflicting Tailwind classes so the last one wins.

Types

Name	What it is
`ButtonProps`	Props of `Button`.
`BadgeProps`	Props of `Badge`.
`CardProps`	Props of `Card`.
`CardHeaderProps`	Props of `CardHeader`.
`CardTitleProps`	Props of `CardTitle`.
`CardDescriptionProps`	Props of `CardDescription`.
`CardContentProps`	Props of `CardContent`.
`CardFooterProps`	Props of `CardFooter`.
`InputProps`	Props of `Input`.
`LabelProps`	Props of `Label`.
`TextareaProps`	Props of `Textarea`.
`CheckboxProps`	Props of `Checkbox`.
`SelectProps`	Props of `Select`.
`SelectTriggerProps`	Props of `SelectTrigger`.
`SelectValueProps`	Props of `SelectValue`.
`SelectContentProps`	Props of `SelectContent`.
`SelectItemProps`	Props of `SelectItem`.
`DialogProps`	Props of `Dialog`.
`DialogContentProps`	Props of `DialogContent`.
`DialogHeaderProps`	Props of `DialogHeader`.
`DialogFooterProps`	Props of `DialogFooter`.
`DialogTitleProps`	Props of `DialogTitle`.
`DialogDescriptionProps`	Props of `DialogDescription`.
`DropdownMenuProps`	Props of `DropdownMenu`.
`DropdownMenuTriggerProps`	Props of `DropdownMenuTrigger`.
`DropdownMenuContentProps`	Props of `DropdownMenuContent`.
`DropdownMenuItemProps`	Props of `DropdownMenuItem`.
`SheetProps`	Props of `Sheet`.
`SheetContentProps`	Props of `SheetContent`.
`SheetHeaderProps`	Props of `SheetHeader`.
`SheetTitleProps`	Props of `SheetTitle`.
`PopoverProps`	Props of `Popover`.
`PopoverTriggerProps`	Props of `PopoverTrigger`.
`PopoverContentProps`	Props of `PopoverContent`.
`SeparatorProps`	Props of `Separator`.
`SkeletonProps`	Props of `Skeleton`.
`CarouselOptions`	The options a `Carousel` accepts.
`CarouselApi`	The carousel's controller, for reading which slide shows and moving between slides.
`CarouselProps`	Props of `Carousel`.
`CarouselContentProps`	Props of `CarouselContent`.
`CarouselItemProps`	Props of `CarouselItem`.
`CarouselPreviousProps`	Props of `CarouselPrevious`.
`CarouselNextProps`	Props of `CarouselNext`.
`InlineErrorProps`	Props of `InlineError`.
`IconProps`	Props of `Icon`.
`TooltipProps`	Props of `Tooltip`.
`PageLinksProps`	Props of `PageLinks`.
`ClassFlag`	A flag in an object of flags: its class name applies while the flag is truthy.
`ClassValue`	Anything `cn` turns into class names: strings, numbers, nested arrays and objects of flags.
`InViewOptions`	Options of `useInView`.
`InView`	What `useInView` returns.
`SnapCarouselOptions`	Options of `useSnapCarousel`.
`SnapCarousel`	What `useSnapCarousel` returns.
`RovingTab`	One tab of a tablist that `useRovingTabs` moves focus between.
`RovingTabsOptions`	Options of `useRovingTabs`.

Last updated Oct 29, 2026