)
}
function CalendarPrevious({
className,
children,
...props
}: React.ComponentProps) {
return (
{children ?? (
)}
)
}
function CalendarNext({
className,
children,
...props
}: React.ComponentProps) {
return (
{children ?? (
)}
)
}
function CalendarHeading({
className,
...props
}: React.ComponentProps) {
return (
)
}
function CalendarGrid({
className,
...props
}: React.ComponentProps) {
return (
)
}
function CalendarWeekdays({
className,
...props
}: React.ComponentProps) {
return (
)
}
function CalendarWeekday({
className,
...props
}: React.ComponentProps) {
return (
)
}
function CalendarWeeks(
props: React.ComponentProps
) {
return
}
function CalendarDay({
className,
...props
}: React.ComponentProps) {
return (
)
}
function DatePickerPreset({
className,
...props
}: React.ComponentProps) {
return (
)
}
const createDatePickerController =
DatePickerPrimitive.createDatePickerController
export {
DatePicker,
DatePickerControl,
DatePickerInput,
DatePickerSeparator,
DatePickerTrigger,
DatePickerClear,
DatePickerHint,
DatePickerContent,
DatePickerCalendar,
DatePickerPreset,
CalendarPrevious,
CalendarNext,
CalendarHeading,
CalendarGrid,
CalendarWeekdays,
CalendarWeekday,
CalendarWeeks,
CalendarDay,
createDatePickerController,
}
export type {
DateMatchers,
DatePickerController,
DatePickerValue,
} from "@ui-sdk/react/date-picker"
```
```tsx title="components/ui/button.tsx"
"use client"
import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { Spinner } from "@/components/ui/spinner"
import {
useButtonFeedback,
type ButtonFeedbackOptions,
type ButtonStatus,
} from "@/hooks/use-button-feedback"
const buttonVariants = cva(
"group/button relative inline-flex items-center justify-center rounded-md bg-clip-padding text-sm font-medium whitespace-nowrap inset-ring-(length:--hairline) inset-ring-transparent transition-[color,background-color,box-shadow,opacity,translate,scale] duration-200 ease-out-quint outline-none select-none focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:inset-ring-ring focus-visible:outline-hidden active:duration-100 active:not-aria-[haspopup]:not-aria-busy:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:inset-ring-destructive motion-safe:active:not-aria-[haspopup]:not-aria-busy:scale-[0.97] dark:aria-invalid:ring-destructive/40 dark:aria-invalid:inset-ring-destructive/50 forced-colors:border [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80",
outline:
"bg-background inset-ring-border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30 dark:inset-ring-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 forced-colors:border-0",
"ghost-destructive":
"text-destructive hover:bg-destructive/10 hover:text-destructive aria-expanded:bg-destructive/10 focus-visible:ring-destructive/70 focus-visible:inset-ring-destructive/40 dark:hover:bg-destructive/20 forced-colors:border-0",
destructive:
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:ring-destructive/70 focus-visible:inset-ring-destructive/40 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/70",
link: "text-primary underline-offset-4 hover:underline forced-colors:border-0",
success:
"bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/70 focus-visible:inset-ring-success/40",
error:
"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/70 focus-visible:inset-ring-destructive/40 motion-safe:animate-button-shake",
},
size: {
default:
"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md pointer-coarse:after:absolute pointer-coarse:after:-inset-y-2.5 pointer-coarse:after:inset-x-0 pointer-coarse:in-data-[slot=button-group]:after:hidden has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md pointer-coarse:after:absolute pointer-coarse:after:-inset-y-1.5 pointer-coarse:after:inset-x-0 pointer-coarse:in-data-[slot=button-group]:after:hidden has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5",
lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
icon: "size-9 shrink-0",
"icon-xs":
"size-6 shrink-0 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md pointer-coarse:after:absolute pointer-coarse:after:-inset-2.5 pointer-coarse:in-data-[slot=button-group]:after:hidden [&_svg:not([class*='size-'])]:size-3",
"icon-sm":
"size-8 shrink-0 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md pointer-coarse:after:absolute pointer-coarse:after:-inset-1.5 pointer-coarse:in-data-[slot=button-group]:after:hidden",
"icon-lg": "size-10 shrink-0",
"icon-xl": "size-12 shrink-0 [&_svg:not([class*='size-'])]:size-5",
},
shape: {
default: "",
pill: "rounded-full in-data-[slot=button-group]:rounded-full",
},
},
defaultVariants: {
variant: "default",
size: "default",
shape: "default",
},
}
)
type ButtonVariant = Exclude<
NonNullable["variant"]>,
"success" | "error"
>
type ButtonClickEvent = Parameters<
NonNullable
>[0]
type ButtonProps = Omit &
Omit, "variant"> &
ButtonFeedbackOptions & {
variant?: ButtonVariant | null
onClick?: (event: ButtonClickEvent) => unknown
feedback?: boolean
loading?: boolean
status?: ButtonStatus
loadingLabel?: React.ReactNode
successLabel?: React.ReactNode
errorLabel?: React.ReactNode | ((error: unknown) => React.ReactNode)
}
const stateTransitionTime = 220
const statuses: ButtonStatus[] = ["idle", "loading", "success", "error"]
const quietVariants: ButtonVariant[] = ["ghost", "link"]
const quietStatusClasses: Partial> = {
success: "text-success hover:text-success",
error:
"text-destructive hover:text-destructive motion-safe:animate-button-shake",
}
function isThenable(value: unknown): value is PromiseLike {
return (
typeof value === "object" &&
value !== null &&
typeof (value as PromiseLike).then === "function"
)
}
function useStatusTransition(status: ButtonStatus) {
const [shown, setShown] = React.useState(status)
const [leaving, setLeaving] = React.useState(null)
const [transitionKey, setTransitionKey] = React.useState(0)
if (status !== shown) {
setLeaving(shown)
setShown(status)
setTransitionKey((key) => key + 1)
}
React.useEffect(() => {
if (leaving === null) {
return
}
const timer = setTimeout(() => setLeaving(null), stateTransitionTime)
return () => clearTimeout(timer)
}, [leaving, transitionKey])
return { leaving, transitionKey }
}
function useLayerWidth(status: ButtonStatus, active: boolean) {
const contentRef = React.useRef(null)
const layersRef = React.useRef(new Map())
const observerRef = React.useRef(null)
const statusRef = React.useRef(status)
const applyWidth = React.useCallback(() => {
const content = contentRef.current
const layer = layersRef.current.get(statusRef.current)
if (!content || !layer) {
return
}
const natural = parseFloat(getComputedStyle(layer).width)
if (!Number.isFinite(natural)) {
return
}
content.style.width = `${natural}px`
if (!content.hasAttribute("data-measured")) {
requestAnimationFrame(() => content.setAttribute("data-measured", ""))
}
}, [])
React.useLayoutEffect(() => {
statusRef.current = status
if (active) {
applyWidth()
}
}, [active, applyWidth, status])
React.useLayoutEffect(() => {
if (!active || typeof ResizeObserver === "undefined") {
return
}
const observer = new ResizeObserver(applyWidth)
observerRef.current = observer
layersRef.current.forEach((layer) => observer.observe(layer))
document.fonts?.addEventListener?.("loadingdone", applyWidth)
return () => {
observer.disconnect()
observerRef.current = null
document.fonts?.removeEventListener?.("loadingdone", applyWidth)
}
}, [active, applyWidth])
const layerRef = React.useCallback((node: HTMLElement | null) => {
if (!node) {
return
}
const layer = node.dataset.layer as ButtonStatus
layersRef.current.set(layer, node)
observerRef.current?.observe(node)
return () => {
observerRef.current?.unobserve(node)
if (layersRef.current.get(layer) === node) {
layersRef.current.delete(layer)
}
}
}, [])
return { contentRef, layerRef }
}
function composeHandlers(
first: ((event: Event) => void) | undefined,
second: (event: Event) => void
) {
return (event: Event) => {
first?.(event)
second(event)
}
}
function Button({
className,
variant = "default",
size = "default",
shape = "default",
children,
onClick,
disabled,
focusableWhenDisabled,
feedback,
loading,
status: statusProp,
onStatusChange,
onError,
resetAfter,
loadingLabel,
successLabel = "Done",
errorLabel = "Failed",
onPointerEnter,
onPointerLeave,
onFocus,
onBlur,
...props
}: ButtonProps) {
const internal = useButtonFeedback({ resetAfter, onStatusChange, onError })
const status = statusProp ?? (loading ? "loading" : internal.status)
const requested =
Boolean(feedback) || loading !== undefined || statusProp !== undefined
const [enabled, setEnabled] = React.useState(requested)
if (requested && !enabled) {
setEnabled(true)
}
const { leaving, transitionKey } = useStatusTransition(status)
const iconOnly = size?.startsWith("icon") ?? false
const widthStatus =
status === "loading" && loadingLabel === undefined ? "idle" : status
const { contentRef, layerRef } = useLayerWidth(
widthStatus,
enabled && !iconOnly
)
const isLoading = status === "loading"
const quiet = quietVariants.includes(variant ?? "default")
const resolvedVariant =
!quiet && status === "success"
? "success"
: !quiet && status === "error"
? "error"
: variant
const resolvedErrorLabel =
typeof errorLabel !== "function"
? errorLabel
: internal.error !== undefined
? errorLabel(internal.error)
: "Failed"
const handleClick = (event: ButtonClickEvent) => {
if (feedback && internal.isPending()) {
return
}
const result = onClick?.(event)
if (feedback && isThenable(result)) {
internal.track(result)
}
}
const layerContent = (layer: ButtonStatus, animated: boolean) => {
if (layer === "idle") {
return children
}
if (layer === "loading") {
return (
<>
{iconOnly ? null : loadingLabel}
)
}
if (layer === "success") {
return (
<>
path:first-child]:animate-button-draw-circle motion-safe:[&>path:first-child]:[stroke-dasharray:57] motion-safe:[&>path:first-child]:[stroke-dashoffset:57] motion-safe:[&>path:last-child]:animate-button-draw-check motion-safe:[&>path:last-child]:[stroke-dasharray:9] motion-safe:[&>path:last-child]:[stroke-dashoffset:9]"
)}
/>
{iconOnly ? null : successLabel}
)
}
return (
<>
{iconOnly ? null : resolvedErrorLabel}
)
}
const button = (
{enabled ? (
{statuses.map((layer) => {
const active = layer === status
const exiting = layer === leaving
const namesButton =
layer === "idle" && isLoading && loadingLabel === undefined
return (
0 &&
"origin-bottom motion-safe:animate-button-state-in motion-reduce:animate-in motion-reduce:animation-duration-150 motion-reduce:fade-in-0",
exiting &&
"pointer-events-none origin-top opacity-0 motion-safe:animate-button-state-out"
)}
>
{layerContent(layer, active || exiting)}
)
})}
) : (
children
)}
)
if (!enabled) {
return button
}
const announcement =
status === "loading"
? typeof loadingLabel === "string"
? loadingLabel
: "Loading"
: status === "success"
? typeof successLabel === "string"
? successLabel
: "Done"
: status === "error"
? typeof resolvedErrorLabel === "string"
? resolvedErrorLabel
: "Failed"
: ""
return (
<>
{button}
{announcement}
)
}
export { Button, buttonVariants, useButtonFeedback }
export type { ButtonProps, ButtonStatus, ButtonFeedbackOptions }
```
Update the import paths to match your project setup.
## Usage
UI SDK adds a little CSS of its own in a cascade layer named `ui-sdk`. Declare that layer at the top of your global stylesheet, above the Tailwind import, so your classes win over it.
```css
@layer ui-sdk;
@import "tailwindcss";
```
```tsx
import {
DatePicker,
DatePickerContent,
DatePickerControl,
DatePickerHint,
DatePickerInput,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
```
```tsx
```
Values are ISO date strings like `2026-11-20`, with no time or time zone, so you don’t need a date library. People type in their own date order, like 11/20/2026 or 20.11.2026, and the field formats the date when they press Enter or leave it. `DatePickerContent` with no children renders a styled calendar.
## Composition
```text
DatePicker
├── DatePickerControl
│ ├── DatePickerInput
│ ├── DatePickerSeparator
│ ├── DatePickerClear
│ └── DatePickerTrigger
├── DatePickerHint
└── DatePickerContent
├── DatePickerPreset
└── DatePickerCalendar
├── CalendarPrevious
├── CalendarHeading
├── CalendarNext
└── CalendarGrid
├── CalendarWeekdays
│ └── CalendarWeekday
└── CalendarWeeks
└── CalendarDay
```
## Examples
### Range
With `mode="range"`, add a second input with `end`. The calendar stays open after the first date and closes after the second. `months={2}` shows two months side by side, stacked on small screens.
```tsx title="components/examples/ui-sdk-date-picker/range.tsx"
import {
DatePicker,
DatePickerCalendar,
DatePickerContent,
DatePickerControl,
DatePickerInput,
DatePickerSeparator,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
function UiSdkDatePickerRange() {
return (
)
}
export { UiSdkDatePickerRange }
```
### Presets
A `DatePickerPreset` picks its `value` and closes the popup. It shows as pressed while its value is selected.
```tsx title="components/examples/ui-sdk-date-picker/presets.tsx"
"use client"
import * as React from "react"
import {
DatePicker,
DatePickerCalendar,
DatePickerContent,
DatePickerControl,
DatePickerInput,
DatePickerPreset,
DatePickerSeparator,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
function isoDate(date: Date) {
const month = String(date.getMonth() + 1).padStart(2, "0")
const day = String(date.getDate()).padStart(2, "0")
return `${date.getFullYear()}-${month}-${day}`
}
function daysAgo(days: number) {
const date = new Date()
date.setDate(date.getDate() - days)
return isoDate(date)
}
function UiSdkDatePickerPresets() {
const [today, setToday] = React.useState(null)
React.useEffect(() => {
setToday(isoDate(new Date()))
}, [])
const presets = today
? [
{ label: "Today", value: [today, today] as [string, string] },
{
label: "Last 7 days",
value: [daysAgo(6), today] as [string, string],
},
{
label: "Last 30 days",
value: [daysAgo(29), today] as [string, string],
},
{
label: "Last 90 days",
value: [daysAgo(89), today] as [string, string],
},
]
: []
return (
{presets.map((preset) => (
{preset.label}
))}
)
}
export { UiSdkDatePickerPresets }
```
### Min, max and unavailable dates
`min`, `max` and `unavailable` apply to typing and picking. Here weekends and two holidays can’t be picked, and a typed one is marked invalid.
```tsx title="components/examples/ui-sdk-date-picker/limits.tsx"
import {
DatePicker,
DatePickerContent,
DatePickerControl,
DatePickerHint,
DatePickerInput,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
function UiSdkDatePickerLimits() {
return (
)
}
export { UiSdkDatePickerLimits }
```
### Language
`locale` sets the typed format, the hint and the calendar’s names. Without it, the picker reads the page’s `lang`. The buttons have English names, so pass `aria-label` to translate them.
```tsx title="components/examples/ui-sdk-date-picker/locale.tsx"
import {
DatePicker,
DatePickerContent,
DatePickerControl,
DatePickerHint,
DatePickerInput,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
function UiSdkDatePickerLocale() {
return (
)
}
export { UiSdkDatePickerLocale }
```
### Form
With a `name`, the date submits as an ISO string. `required` blocks an empty submit, text that isn’t a date blocks one too, and reset goes back to `defaultValue`.
```tsx title="components/examples/ui-sdk-date-picker/form.tsx"
"use client"
import * as React from "react"
import { Button } from "@/components/ui/button"
import {
DatePicker,
DatePickerContent,
DatePickerControl,
DatePickerHint,
DatePickerInput,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
function UiSdkDatePickerForm() {
const [submitted, setSubmitted] = React.useState(null)
return (
)
}
export { UiSdkDatePickerForm }
```
### Controller
A controller from `createDatePickerController()` sets the date or opens the calendar from anywhere, and `onValueChange` reports each change. Leave `value` unset here, so the calendar can move to the month the controller picks.
```tsx title="components/examples/ui-sdk-date-picker/controller.tsx"
"use client"
import * as React from "react"
import { Button } from "@/components/ui/button"
import {
createDatePickerController,
DatePicker,
DatePickerContent,
DatePickerControl,
DatePickerInput,
DatePickerTrigger,
type DatePickerValue,
} from "@/components/ui/ui-sdk-date-picker"
function UiSdkDatePickerController() {
const [picker] = React.useState(createDatePickerController)
const [value, setValue] = React.useState(null)
return (
{typeof value === "string" ? value : "No date"}
)
}
export { UiSdkDatePickerController }
```
### Disabled and read-only
`disabled` stops typing and opening. `readOnly` still opens the calendar so people can look, but nothing can change.
```tsx title="components/examples/ui-sdk-date-picker/disabled.tsx"
import {
DatePicker,
DatePickerContent,
DatePickerControl,
DatePickerInput,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
function UiSdkDatePickerDisabled() {
return (
)
}
export { UiSdkDatePickerDisabled }
```
### Right to left
With an Arabic locale inside dir=rtl, the field, the arrows and the calendar all run from the right.
```tsx title="components/examples/ui-sdk-date-picker/rtl.tsx"
import {
DatePicker,
DatePickerContent,
DatePickerControl,
DatePickerInput,
DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"
function UiSdkDatePickerRtl() {
return (
)
}
export { UiSdkDatePickerRtl }
```
## Keyboard
| Key | Action |
| --- | --- |
| `Enter` | In the input, reads the typed date. On a day, picks it. |
| `←` `→` `↑` `↓` | Moves between days, or by a week up and down. |
| `Page Up` `Page Down` | Moves a month back or forward. |
| `Home` `End` | Moves to the start or end of the week. |
| `Esc` | Cancels an unfinished range, or else closes the calendar. |
## Accessibility
The calendar opens as a dialog with a grid of days, each named in full, like “Friday, November 20, 2026”. The hint describes the input, so screen readers hear the format to type. Text that isn’t a date sets `aria-invalid` and keeps the old value, and unavailable days stay focusable so keyboard users still hear them.
The trigger, popup and arrows have English names. Pass `aria-label` to each to translate them. Inputs use a 16px font on touch screens so iOS doesn’t zoom, and the popup only scales in when motion is allowed.
## API reference
Each part wraps the UI SDK part of the same name and accepts all of its props, including `render` and a `className` that can be a function of the part’s state. `DatePickerControl`, `DatePickerSeparator` and `DatePickerCalendar` are HextaUI layout parts.
### DatePicker
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"single" \| "range"` | `"single"` | |
| `value` | `string \| [string, string] \| null` | – | |
| `defaultValue` | `string \| [string, string] \| null` | – | |
| `onValueChange` | `(value, details) => void` | – | |
| `min` | `string` | – | |
| `max` | `string` | – | |
| `unavailable` | `DateMatchers` | – | ISO dates, { from, to }, { weekday }, { before }, { after } or a function. |
| `months` | `number` | `1` | |
| `pageBy` | `"month" \| "page"` | `"month"` | |
| `locale` | `string` | – | |
| `weekStartsOn` | `number` | – | |
| `minDays` | `number` | – | |
| `maxDays` | `number` | – | |
| `closeOnSelect` | `boolean` | `true` | |
| `disabled` | `boolean` | `false` | |
| `readOnly` | `boolean` | `false` | |
| `name` | `string` | – | |
| `startName` | `string` | – | |
| `endName` | `string` | – | |
| `required` | `boolean` | `false` | |
| `open` | `boolean` | – | |
| `onOpenChange` | `(open, details) => void` | – | |
| `controller` | `DatePickerController` | – | From createDatePickerController(). |
| Attribute | Description |
| --- | --- |
| `data-slot="date-picker"` | Target the date picker in CSS. |
| `data-open` | Present while open. |
| `data-invalid` | Present while an input holds text that isn’t a date. |
| `data-disabled` | Present when disabled. |
| `data-readonly` | Present when read-only. |
### DatePickerInput
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `end` | `boolean` | `false` | Makes it a range’s end. |
### DatePickerTrigger
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | – | Defaults to a calendar icon. |
| `aria-label` | `string` | `"Choose date"` | |
### DatePickerClear
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | – | Defaults to an X icon named Clear. It hides while there’s nothing to clear. |
### DatePickerContent
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | – | Defaults to a DatePickerCalendar. |
| `align` | `Align` | `"start"` | |
| `sideOffset` | `number` | `6` | |
| `collisionPadding` | `number` | `8` | |
| Attribute | Description |
| --- | --- |
| `data-slot="date-picker-content"` | Target the popup in CSS. |
| `--cell-size` | The size of each day, larger on touch screens. |
### DatePickerCalendar
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `months` | `number` | `1` | How many grids to render, side by side. |
### DatePickerPreset
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string \| [string, string]` | – | |
| `render` | `ReactElement \| (props, state) => ReactElement` | – | |
### CalendarDay
| Attribute | Description |
| --- | --- |
| `data-slot="calendar-day"` | Target a day in CSS. |
| `data-today` | Present on today. |
| `data-range-start` | Present where a range starts. |
| `data-range-end` | Present where a range ends. |
| `data-unavailable` | Present on a day that can’t be picked. |
| `data-outside` | Present on a day of the next or previous month. |
## Notes for AI assistants
- Install a component with the shadcn CLI: `npx shadcn@latest add https://hextaui.com/r/.json`. It adds the source, the HextaUI theme tokens and any HextaUI components it depends on. `https://hextaui.com/r/all.json` installs every component.
- The code is then owned by the project, like shadcn/ui. There is no HextaUI npm package. HextaUI is MIT licensed and free for personal and commercial use.
- Behavior and accessibility come from Base UI (`@base-ui/react`). Compose with the `render` prop, not `asChild`.
- Styling uses Tailwind CSS v4 with theme tokens. Merge classes with `cn` from the `cn` package.
- Icons come from `@tabler/icons-react`.
- Import components from `@/components/ui/`, hooks from `@/hooks/` and utilities from `@/lib/`.
Every HextaUI doc: https://hextaui.com/llms.txt
## Related
- [Button](https://hextaui.com/docs/button) - Buttons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast requests.
- [Calendar](https://hextaui.com/docs/calendar) - A date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
- [Checkbox](https://hextaui.com/docs/checkbox) - A checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.
- [Combobox](https://hextaui.com/docs/combobox) - A filterable select with chips, groups and async results, in a popup that resizes as you type.
- [Date picker](https://hextaui.com/docs/date-picker) - A button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
- [Field](https://hextaui.com/docs/field) - Labels, descriptions and errors wired to their control, with validation states and layouts for forms.