Generated API snapshot

@askrjs/themes/components

Exports from the declarations published in @askrjs/themes. Signatures reflect the published artifact.

Exports

This entrypoint publishes 509 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

`AccordionContent`type

AccordionContent: { (props: AccordionContentProps): JSX.Element | null; (props: AccordionContentAsChildProps): JSX.Element | null; }

Renders the `accordion-content` part of `accordion` with `role="region"`. Supports polymorphic rendering via `asChild`.

`AccordionHeader`type

AccordionHeader: { (props: AccordionHeaderProps): JSX.Element; (props: AccordionHeaderAsChildProps): JSX.Element; }

Renders the `accordion-header` part of `accordion`. Supports polymorphic rendering via `asChild`.

`AccordionItem`type

AccordionItem: (props: AccordionItemProps) => JSX.Element

Renders the `accordion-item` part of `accordion`.

`AccordionTrigger`type

AccordionTrigger: { (props: AccordionTriggerProps): JSX.Element; (props: AccordionTriggerAsChildProps): JSX.Element; }

Renders the `accordion-trigger` part of `accordion`. Supports polymorphic rendering via `asChild`.

`Alert`type

Alert: (props: AlertProps) => JSX.Element

Renders an alert/status banner with an optional icon, title, description, actions, and a dismiss button. Automatically picks an "alert" or "status" ARIA role from `variant` unless `role` is set explicitly.

`AlertDescription`type

AlertDescription: (props: CatalogComponentProps) => JSX.Element

Renders the `alert-description` part of the shadcn-compatible catalog primitives.

`AlertDialog`type

AlertDialog: (props: AlertDialogProps) => JSX.Element

Renders a part of `alert-dialog`.

`AlertDialogAction`type

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

`AlertDialogCancel`type

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

`AlertDialogContent`type

AlertDialogContent: (props: AlertDialogContentProps | AlertDialogContentAsChildProps) => JSX.Element

Renders a part of `alert-dialog`. Supports polymorphic rendering via `asChild`.

`AlertDialogDescription`type

DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }

Renders the `dialog-description` part of `dialog`. Supports polymorphic rendering via `asChild`.

`AlertDialogOverlay`type

DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }

Renders the `dialog-overlay` part of `dialog`. With `@askrjs/themes/default`, the overlay is fully styled out of the box with the shared backdrop token, blur, stacking, and fade animation. Standard Dialog and AlertDialog usage requires no additional overlay CSS; customize the theme tokens instead of applying a competing background class. Supports polymorphic rendering via `asChild`.

`AlertDialogPortal`type

DialogPortal: (props: DialogPortalProps) => JSX.Element | null

Renders a part of `dialog`.

`AlertDialogTitle`type

DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }

Renders the `dialog-title` part of `dialog`. Supports polymorphic rendering via `asChild`.

`AlertDialogTrigger`type

AlertDialogTrigger: (props: AlertDialogTriggerProps | AlertDialogTriggerAsChildProps) => JSX.Element

Renders a part of `alert-dialog`. Supports polymorphic rendering via `asChild`.

`AlertHeadingTag`type

AlertHeadingTag: "h2" | "h3" | "h4" | "h5" | "h6"

Heading tag allowed for an alert's title via `titleAs`.

`AlertProps`type

AlertProps: DivProps & {
  actions?: unknown;
  children?: unknown;
  description?: unknown;
  dismissLabel?: string;
  icon?: unknown;
  onDismiss?: () => void;
  title?: unknown;
  titleAs?: AlertHeadingTag;
  variant?: AlertVariant;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link Alert } component.

actions: actions?: unknown;
children: children?: unknown;
description: description?: unknown;
dismissLabel: dismissLabel?: string | undefined;
icon: icon?: unknown;
onDismiss: onDismiss?: (() => void) | undefined;
ref: ref?: Ref<HTMLDivElement>;
title: title?: unknown;
titleAs: titleAs?: AlertHeadingTag | undefined;
variant: variant?: AlertVariant | undefined;

`AlertTitle`type

AlertTitle: (props: CatalogComponentProps) => JSX.Element

Renders the `alert-title` part of the shadcn-compatible catalog primitives.

`AlertVariant`type

AlertVariant: "default" | "info" | "success" | "warning" | "danger"

Visual tone of an {@link AlertProps} alert; `"danger"`/`"warning"` render with `role="alert"`.

`Aside`type

Aside: (props: AsideProps) => JSX.Element

Renders a `<aside>`-element {@link Block } tagged with `data-slot="aside"`.

`AsideProps`type

AsideProps: Omit<BlockElementProps<"aside">, "as">

Props for the {@link Aside } component.

`AspectRatio`type

AspectRatio: { (props: AspectRatioProps): JSX.Element; (props: AspectRatioAsChildProps): JSX.Element; }

Constrains its content to a fixed width/height ratio (defaults to `1`) using a computed `aspect-ratio` style, rendering as a `<div>` or, with `asChild`, merging its layout into the single child element.

`AspectRatioAsChildProps`type

AspectRatioAsChildProps: AspectRatioOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link AspectRatio } rendered with `asChild`, merging layout onto a single child element.

asChild: asChild: true;
children: children: JSXElement;
ratio: ratio?: string | number | undefined;
ref: ref?: Ref<unknown>;
style: style?: unknown;

`AspectRatioProps`type

AspectRatioProps: Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & AspectRatioOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}

Props for {@link AspectRatio } rendered as its default `<div>` element.

asChild: asChild?: false | undefined;
children: children?: unknown;
ratio: ratio?: string | number | undefined;
ref: ref?: Ref<HTMLDivElement>;
style: style?: unknown;

`Avatar`type

Avatar: { (props: AvatarProps): JSX.Element; (props: AvatarAsChildProps): JSX.Element; }

Renders the `avatar` part of `avatar`. Supports polymorphic rendering via `asChild`.

`AvatarFallback`type

AvatarFallback: { (props: AvatarFallbackProps): JSX.Element | null; (props: AvatarFallbackAsChildProps): JSX.Element | null; }

Renders the `avatar-fallback` part of `avatar`. Supports polymorphic rendering via `asChild`.

`AvatarImage`type

AvatarImage: (props: AvatarImageProps) => JSX.Element

Renders the `avatar-image` part of `avatar`.

`Badge`type

Badge: { (props: BadgeProps): JSX.Element; (props: BadgeAsChildProps): JSX.Element; }

Renders a small status/label badge, defaulting to a `<span>` (or merging onto a child via `asChild`), with a `variant` color modifier.

`BadgeAsChildProps`type

BadgeAsChildProps: BadgeOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link Badge } rendered with `asChild`, merging its attributes onto a single child element.

asChild: asChild: true;
children: children: JSXElement;
ref: ref?: Ref<unknown>;
variant: variant?: BadgeVariant | undefined;

`BadgeOwnProps`type

BadgeOwnProps: {
  children?: unknown;
  variant?: BadgeVariant;
}

Props shared by both {@link Badge } call signatures.

children: children?: unknown;
variant: variant?: BadgeVariant | undefined;

`BadgeProps`type

BadgeProps: Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BadgeOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLSpanElement>;
}

Props for {@link Badge } rendered as its default `<span>` element.

asChild: asChild?: false | undefined;
children: children?: unknown;
ref: ref?: Ref<HTMLSpanElement>;
variant: variant?: BadgeVariant | undefined;

`Block`type

Block: { (props: BlockNativeProps): JSX.Element; (props: BlockAsChildProps): JSX.Element; }

Low-level layout primitive: renders any element in {@link BlockElement } (default `<div>`) and turns layout-only props (spacing, alignment, direction, sizing, etc.) into a generated utility class. With `asChild`, the layout is merged onto a single child element instead of a wrapper.

`BlockAlign`type

BlockAlign: "start" | "end" | "center" | "stretch" | "baseline"

`BlockAsChildProps`type

BlockAsChildProps: Omit<BlockOwnProps, "as"> & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link Block } rendered with `asChild`, merging layout onto a single child element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
asChild: asChild: true;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children: JSXElement;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockBackground`type

BlockBackground: "surface" | "muted" | "selected" | "canvas" | "raised" | "overlay" | "transparent"

`BlockDirection`type

BlockDirection: "row" | "column" | "row-reverse" | "column-reverse"

`BlockDivProps`type

BlockDivProps: BlockElementProps<"div">

{@link Block } props specialized for a `<div>` element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: "div" | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockElement`type

BlockElement: "div" | "span" | "main" | "header" | "footer" | "section" | "aside" | "nav" | "a" | "ul" | "ol" | "li" | "form" | "article"

Element tags {@link Block } can render as via its `as` prop.

`BlockElementProps`type

BlockElementProps: Omit<JSX.IntrinsicElements[TElement], "children" | "ref"> & BlockOwnProps & {
  as?: TElement;
  asChild?: false;
  ref?: Ref<unknown>;
}

{@link Block } props specialized for a given {@link BlockElement} tag `TElement`.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: TElement | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockJustify`type

BlockJustify: "start" | "end" | "center" | "between"

`BlockMargin`type

BlockMargin: BlockSpace | "auto"

`BlockNativeProps`type

BlockNativeProps: { [TElement in BlockElement]: BlockElementProps<TElement>; }[BlockElement]

Union of {@link BlockElementProps} across every {@link BlockElement}, used for {@link Block }'s native (non-`asChild`) overload.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: "a" | "article" | "aside" | "div" | "form" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul" | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | ((() => IntrinsicClassValue) & string) | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockOwnProps`type

BlockOwnProps: BlockLayoutProps & {
  as?: BlockElement;
  children?: unknown;
  className?: string;
}

Layout and structural props accepted by {@link Block }, independent of the rendered element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: BlockElement | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockProps`type

BlockProps: BlockNativeProps | BlockAsChildProps

Union of all prop shapes accepted by {@link Block }.

align: align?: ResponsiveValue<BlockAlign> | undefined;
asChild: asChild?: boolean | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | ((() => IntrinsicClassValue) & string) | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockRadius`type

BlockRadius: true | "sm" | "md" | "lg" | "xl" | "round"

`BlockResponsiveValue`type

ResponsiveValue: T | Partial<Record<LayoutBreakpoint, T>>

`BlockRowFrom`type

BlockRowFrom: Exclude<LayoutBreakpoint, "base">

`BlockShadow`type

BlockShadow: true | "sm" | "md" | "lg"

`BlockSize`type

BlockSize: "auto" | "full" | "screen" | "content" | "sidebar" | "page" | "sm" | "md" | "lg" | "xl"

`BlockSpace`type

BlockSpace: "0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "page"

`BlockSpanProps`type

BlockSpanProps: BlockElementProps<"span">

{@link Block } props specialized for a `<span>` element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: "span" | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockZIndex`type

BlockZIndex: "header" | "sticky" | "fixed" | "dropdown" | "modal" | "popover" | "toast" | "tooltip"

`Box`type

Box: (props: LegacyLayoutProps) => JSX.Element

`Brand`type

Brand: <TElement extends "div" | "a" | "span" = "div">(props: BrandProps<TElement>) => JSX.Element

Renders a brand/logo wrapper, defaulting to a `<div>` (or `<a>`/`<span>` via `as`), or merges onto a single child via `asChild`.

`BrandLabel`type

BrandLabel: (props: BrandLabelProps) => JSX.Element

Renders the text label portion of a {@link Brand}.

`BrandMark`type

BrandMark: (props: BrandMarkProps) => JSX.Element

Renders the icon/mark portion of a {@link Brand}.

`Breadcrumb`type

Breadcrumb: (props: CatalogComponentProps) => JSX.Element

Renders the `breadcrumb` part of the shadcn-compatible catalog primitives.

`BreadcrumbEllipsis`type

BreadcrumbEllipsis: (props: CatalogComponentProps) => JSX.Element

Renders a non-interactive ellipsis marker in a breadcrumb trail.

`BreadcrumbItem`type

BreadcrumbItem: (props: CatalogComponentProps) => JSX.Element

Renders the `breadcrumb-item` part of the shadcn-compatible catalog primitives.

`BreadcrumbLink`type

BreadcrumbLink: (props: CatalogComponentProps) => JSX.Element

Renders the `breadcrumb-link` part of the shadcn-compatible catalog primitives.

`BreadcrumbList`type

BreadcrumbList: (props: CatalogComponentProps) => JSX.Element

Renders the `breadcrumb-list` part of the shadcn-compatible catalog primitives.

`BreadcrumbPage`type

BreadcrumbPage: (props: CatalogComponentProps) => JSX.Element

Renders the current (non-link) breadcrumb page, marked `aria-current="page"`.

`BreadcrumbSeparator`type

BreadcrumbSeparator: (props: CatalogComponentProps) => JSX.Element

Renders the separator between breadcrumb items (defaults to `"/"`).

`Button`type

Button: { (props: ButtonNativeProps): JSX.Element; (props: ButtonAsChildProps): JSX.Element; }

Headless Button component ## Responsibilities - Compose pressable foundation for interaction behavior - Enforce type="button" default to prevent accidental form submission - Forward props and refs to native button or child element ## Non-Responsibilities (delegated to pressable foundation) - Keyboard event handling (Enter/Space) - Pointer event handling - Disabled state enforcement - ARIA attribute application ## Invariants - MUST NOT contain any event handler logic - MUST NOT check disabled prop directly - MUST use pressable() for ALL interaction behavior - MUST use mergeProps() for ALL prop composition Renders the `button` part of `button`. Supports polymorphic rendering via `asChild`.

Native button (prevents accidental submit)
```tsx
<Button onPress={handleSave}>Save</Button>
```

Explicit form submission
```tsx
<Button type="submit" onPress={handleSubmit}>Submit</Button>
```

Polymorphic rendering (asChild)
```tsx
<Button asChild onPress={handleNav}>
<a href="/home">Home</a>
</Button>
```

`ButtonAsChildElement`type

ButtonAsChildElement: JSXElement | JSX.Element

Button As Child Element.

`ButtonAsChildProps`type

ButtonAsChildProps: ButtonOwnProps & {
  asChild: true;
  children: ButtonAsChildElement;
  ref?: Ref<Element>;
  type?: never;
}

Props when rendering with asChild (polymorphic)

asChild: asChild: true;
children: children: ButtonAsChildElement;
disabled: disabled?: boolean | undefined;
onPress: onPress?: ((e: PressEvent) => void) | undefined;
ref: ref?: Ref<Element>;
size: size?: ButtonSize | undefined;
type: type?: undefined;
variant: variant?: ButtonVariant | undefined;
width: width?: ButtonWidth | undefined;

`ButtonGroup`type

ButtonGroup: (props: ButtonGroupProps) => JSX.Element

Groups related buttons together, optionally visually attached, with a horizontal or vertical orientation and `role="group"` by default.

`ButtonGroupOrientation`type

ButtonGroupOrientation: "horizontal" | "vertical"

Layout direction of a {@link ButtonGroup }.

`ButtonGroupProps`type

ButtonGroupProps: DivProps & {
  children?: unknown;
  attached?: boolean;
  orientation?: ButtonGroupOrientation;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link ButtonGroup } component.

attached: attached?: boolean | undefined;
children: children?: unknown;
orientation: orientation?: ButtonGroupOrientation | undefined;
ref: ref?: Ref<HTMLDivElement>;

`ButtonNativeProps`type

ButtonNativeProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick' | 'disabled' | 'type' | 'ref'> & ButtonOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
}

Props when rendering as native <button>

asChild: asChild?: false | undefined;
children: children?: unknown;
disabled: disabled?: boolean | undefined;
onPress: onPress?: ((e: PressEvent) => void) | undefined;
ref: ref?: Ref<HTMLButtonElement>;
size: size?: ButtonSize | undefined;
type: type?: "button" | "submit" | "reset" | undefined;
variant: variant?: ButtonVariant | undefined;
width: width?: ButtonWidth | undefined;

`ButtonProps`type

ButtonProps: ButtonNativeProps | ButtonAsChildProps

Union of all Button prop variants

asChild: asChild?: boolean | undefined;
children: children?: unknown;
disabled: disabled?: boolean | undefined;
onPress: onPress?: ((e: PressEvent) => void) | undefined;
ref: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;
size: size?: ButtonSize | undefined;
type: type?: "button" | "submit" | "reset" | undefined;
variant: variant?: ButtonVariant | undefined;
width: width?: ButtonWidth | undefined;

`ButtonSize`type

ButtonSize: 'xs' | 'sm' | 'md' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'

Button Size.

`ButtonVariant`type

ButtonVariant: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'

Button Variant.

`ButtonWidth`type

ButtonWidth: 'auto' | 'full'

Button Width.

`Calendar`type

Calendar: (props: CatalogComponentProps) => JSX.Element

Styling-only calendar anatomy; it does not own dates, grid focus, selection, or month navigation.

`CalendarBody`type

CalendarBody: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-body` part of the shadcn-compatible catalog primitives.

`CalendarCaption`type

CalendarCaption: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-caption` part of the shadcn-compatible catalog primitives.

`CalendarCell`type

CalendarCell: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-cell` part of the shadcn-compatible catalog primitives.

`CalendarDay`type

CalendarDay: (props: CatalogComponentProps & { disabled?: boolean; outside?: boolean; rangeEnd?: boolean; rangeMiddle?: boolean; rangeStart?: boolean; selected?: boolean; today?: boolean; }) => JSX.Element

Renders a single selectable day cell in the calendar grid, with selection/range/today state exposed as data attributes.

`CalendarGrid`type

CalendarGrid: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-grid` part of the shadcn-compatible catalog primitives.

`CalendarHead`type

CalendarHead: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-head` part of the shadcn-compatible catalog primitives.

`CalendarHeader`type

CalendarHeader: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-header` part of the shadcn-compatible catalog primitives.

`CalendarNav`type

CalendarNav: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-nav` part of the shadcn-compatible catalog primitives.

`CalendarNextButton`type

CalendarNextButton: (props: CatalogComponentProps) => JSX.Element

Button that navigates the calendar to the next month.

`CalendarPreviousButton`type

CalendarPreviousButton: (props: CatalogComponentProps) => JSX.Element

Button that navigates the calendar to the previous month.

`CalendarRow`type

CalendarRow: (props: CatalogComponentProps) => JSX.Element

Renders the `calendar-row` part of the shadcn-compatible catalog primitives.

`Card`type

Card: (props: CardProps) => JSX.Element

Root card container; applies the `card` class and an optional `variant` modifier.

`CardAction`type

CardAction: (props: CardActionProps) => JSX.Element

Renders an action/control region of a {@link Card}, typically positioned alongside the header.

`CardActionProps`type

CardActionProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardAction } component.

children: children?: unknown;
ref: ref?: Ref<HTMLDivElement>;

`CardContent`type

CardContent: (props: CardContentProps) => JSX.Element

Renders the main content region of a {@link Card}.

`CardContentProps`type

CardContentProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardContent } component.

children: children?: unknown;
ref: ref?: Ref<HTMLDivElement>;

`CardDescription`type

CardDescription: (props: CardDescriptionProps) => JSX.Element

Renders a {@link Card}'s supporting description text.

`CardDescriptionProps`type

CardDescriptionProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}

Props for the {@link CardDescription } component.

children: children?: unknown;
ref: ref?: Ref<HTMLParagraphElement>;

`CardFooter`type

CardFooter: (props: CardFooterProps) => JSX.Element

Renders the footer region of a {@link Card}.

`CardFooterProps`type

CardFooterProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardFooter } component.

children: children?: unknown;
ref: ref?: Ref<HTMLDivElement>;

`CardHeader`type

CardHeader: (props: CardHeaderProps) => JSX.Element

Renders the header region of a {@link Card}.

`CardHeaderProps`type

CardHeaderProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardHeader } component.

children: children?: unknown;
ref: ref?: Ref<HTMLDivElement>;

`CardProps`type

CardProps: DivProps & {
  children?: unknown;
  variant?: CardVariant;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link Card } component.

children: children?: unknown;
ref: ref?: Ref<HTMLDivElement>;
variant: variant?: CardVariant | undefined;

`CardTitle`type

CardTitle: (props: CardTitleProps) => JSX.Element

Renders a {@link Card}'s title, defaulting to an `<h3>` (override with `titleAs`).

`CardTitleHeadingTag`type

CardTitleHeadingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Heading tag allowed for a card's title via `titleAs`.

`CardTitleProps`type

CardTitleProps: HeadingProps & {
  children?: unknown;
  /** Choose the level that follows the surrounding document hierarchy. */
  titleAs?: CardTitleHeadingTag;
  ref?: Ref<HTMLHeadingElement>;
}

Props for the {@link CardTitle } component.

children: children?: unknown;
ref: ref?: Ref<HTMLHeadingElement>;
titleAs: Choose the level that follows the surrounding document hierarchy.

`CardVariant`type

CardVariant: "default" | "raised"

Visual style of a {@link CardProps} card.

`Carousel`type

Carousel: (props: CatalogComponentProps) => JSX.Element

Styling-only carousel anatomy; it does not own an active slide, scrolling, or keyboard navigation.

`CarouselContent`type

CarouselContent: (props: CatalogComponentProps) => JSX.Element

Renders the `carousel-content` part of the shadcn-compatible catalog primitives.

`CarouselItem`type

CarouselItem: (props: CatalogComponentProps) => JSX.Element

Renders the `carousel-item` part of the shadcn-compatible catalog primitives.

`CarouselNext`type

CarouselNext: (props: CatalogComponentProps) => JSX.Element

Button that navigates the carousel to the next item.

`CarouselPrevious`type

CarouselPrevious: (props: CatalogComponentProps) => JSX.Element

Button that navigates the carousel to the previous item.

`CAT_THEME_NAMES`type

CAT_THEME_NAMES: readonly ["tabby", "ginger", "tuxedo", "calico", "torty"]

Names of the built-in "cat" theme presets.

`CAT_THEME_OPTIONS`type

CAT_THEME_OPTIONS: readonly ThemeOption[]

Theme options for the built-in "cat" theme presets, keyed to {@link CAT_THEME_NAMES}.

`CatalogComponentProps`type

CatalogComponentProps: Record<string, unknown> & {
  as?: CatalogElement;
  asChild?: boolean;
  children?: unknown;
  class?: string;
  ref?: Ref<HTMLElement>;
}

Shared prop shape for the shadcn-compatible catalog primitives below: a polymorphic `as`/`asChild` element plus passthrough attributes.

as: as?: keyof JSX.IntrinsicElements | undefined;
asChild: asChild?: boolean | undefined;
children: children?: unknown;
class: class?: string | undefined;
ref: ref?: Ref<HTMLElement>;

`CatThemeName`type

CatThemeName: (typeof CAT_THEME_NAMES)[number]

A built-in "cat" theme name, one of {@link CAT_THEME_NAMES}.

`Checkbox`type

Checkbox: { (props: CheckboxInputProps): JSX.Element; (props: CheckboxAsChildProps): JSX.Element; }

Headless Checkbox component ## Responsibilities - Apply aria-checked for checkbox state signaling - Handle indeterminate state for native and asChild hosts - Support controlled and uncontrolled checked state - Forward props and refs to native input or child element - Preserve native checkbox semantics and apply checkbox behavior to asChild hosts ## Non-Responsibilities - Form submission orchestration beyond native input props ## Invariants - MUST NOT add role="button" (native inputs are role="checkbox") - checked state may be controlled or uncontrolled - indeterminate overrides checked for state signaling - For asChild, consumer MUST provide role="checkbox" Renders the `checkbox` part of `checkbox` with `role="checkbox"`. Supports polymorphic rendering via `asChild`.

Native checkbox input
```tsx
const checked = state(false);
<Checkbox checked={checked()} onPress={() => checked.set(!checked())} />
```

Polymorphic rendering (asChild)
```tsx
<Checkbox asChild checked={agreed} onPress={toggleAgree}>
<div role="checkbox">I agree to terms</div>
</Checkbox>
```

Indeterminate state (partial selection)
```tsx
<Checkbox checked={someChecked} indeterminate={!allChecked && someChecked} onPress={toggleAll}>
Select All
</Checkbox>
```

`Close`type

Close: (props: CloseNativeProps) => JSX.Element

Renders a dismiss ("×") icon button, built on top of `Button`, defaulting to an icon-sized ghost variant with an accessible `label`.

`CloseNativeProps`type

CloseNativeProps: ButtonNativeProps & CloseOwnProps

Props for the {@link Close } component.

label: label?: string | undefined;

`CloseOwnProps`type

CloseOwnProps: {
  label?: string;
}

Props specific to {@link Close }, layered on top of {@link ButtonNativeProps}.

label: label?: string | undefined;

`Collapsible`type

Collapsible: (props: CollapsibleProps) => JSX.Element

Renders a part of `collapsible`.

`CollapsibleContent`type

CollapsibleContent: { (props: CollapsibleContentProps): JSX.Element | null; (props: CollapsibleContentAsChildProps): JSX.Element | null; }

Renders the `collapsible-content` part of `collapsible`. Supports polymorphic rendering via `asChild`.

`CollapsibleTrigger`type

CollapsibleTrigger: { (props: CollapsibleTriggerProps): JSX.Element; (props: CollapsibleTriggerAsChildProps): JSX.Element; }

Renders the `collapsible-trigger` part of `collapsible`. Supports polymorphic rendering via `asChild`.

`Combobox`type

Combobox: (props: CatalogComponentProps) => JSX.Element

Styling-only combobox anatomy; it does not own value, popup, filtering, focus, or ARIA state.

`ComboboxInput`type

ComboboxInput: (props: CatalogComponentProps) => JSX.Element

Styling-only combobox input; consumers supplying behavior also own its complete ARIA contract.

`ComboboxList`type

ComboboxList: (props: CatalogComponentProps) => JSX.Element

Renders the `combobox-list` part of the shadcn-compatible catalog primitives.

`ComboboxOption`type

ComboboxOption: (props: CatalogComponentProps) => JSX.Element

Renders the `combobox-option` part of the shadcn-compatible catalog primitives.

`Command`type

Command: (props: CatalogComponentProps) => JSX.Element

Styling-only command anatomy; it does not own filtering, selection, focus, or keyboard commands.

`CommandDialog`type

CommandDialog: (props: CatalogComponentProps) => JSX.Element

Renders the `command-dialog` part of the shadcn-compatible catalog primitives.

`CommandEmpty`type

CommandEmpty: (props: CatalogComponentProps) => JSX.Element

Renders the `command-empty` part of the shadcn-compatible catalog primitives.

`CommandGroup`type

CommandGroup: (props: CatalogComponentProps) => JSX.Element

Renders the `command-group` part of the shadcn-compatible catalog primitives.

`CommandGroupHeading`type

CommandGroupHeading: (props: CatalogComponentProps) => JSX.Element

Renders the `command-group-heading` part of the shadcn-compatible catalog primitives.

`CommandHeader`type

CommandHeader: (props: CatalogComponentProps) => JSX.Element

Renders the `command-header` part of the shadcn-compatible catalog primitives.

`CommandInput`type

CommandInput: (props: CatalogComponentProps) => JSX.Element

Renders the command palette's search `<input>`.

`CommandItem`type

CommandItem: (props: CatalogComponentProps & { active?: boolean; disabled?: boolean; selected?: boolean; }) => JSX.Element

Renders a selectable command list entry, exposing `active`/`disabled`/`selected` as ARIA and data attributes.

`CommandList`type

CommandList: (props: CatalogComponentProps) => JSX.Element

Renders the `command-list` part of the shadcn-compatible catalog primitives.

`CommandPalette`type

CommandPalette: (props: CommandPaletteProps) => JSX.Element

Root dialog wrapper for a searchable command palette. Manages open state (controlled or uncontrolled), tracks the triggering element, and restores focus to it after the palette closes.

`CommandPaletteContent`type

CommandPaletteContent: (props: CommandPaletteContentProps) => JSX.Element

Dialog content for a {@link CommandPalette}: renders the overlay, an accessible (visually hidden) title/description, and a `Command` list, moving initial focus to `initialFocus` (defaults to the search input) once mounted, and optionally suppressing dismiss-on-escape/backdrop.

`CommandPaletteContentProps`type

CommandPaletteContentProps: Omit<DialogContentProps, "children" | "title" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside"> & {
  children?: unknown;
  title: string;
  description?: string;
  initialFocus?: string | (() => HTMLElement | null) | false;
  closeOnBackdrop?: boolean;
  closeOnEscape?: boolean;
  overlayProps?: DialogOverlayProps;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
}

Props for the {@link CommandPaletteContent } component.

children: children?: unknown;
closeOnBackdrop: closeOnBackdrop?: boolean | undefined;
closeOnEscape: closeOnEscape?: boolean | undefined;
description: description?: string | undefined;
initialFocus: initialFocus?: string | false | (() => HTMLElement | null) | undefined;
onEscapeKeyDown: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside: onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
overlayProps: overlayProps?: DialogOverlayProps | undefined;
title: title: string;

`CommandPaletteLink`type

CommandPaletteLink: (props: CommandPaletteLinkProps) => JSX.Element

A navigable result row that closes the palette on selection (unless `closeOnSelect` is `false`) and supports cancelling navigation via `onBeforeNavigate`.

`CommandPaletteLinkProps`type

CommandPaletteLinkProps: LinkProps & {
  closeOnSelect?: boolean;
  onBeforeNavigate?: (event: Event) => void;
}

Props for the {@link CommandPaletteLink } component.

closeOnSelect: closeOnSelect?: boolean | undefined;
onBeforeNavigate: onBeforeNavigate?: ((event: Event) => void) | undefined;

`CommandPaletteList`type

CommandPaletteList: (props: CommandPaletteListProps) => JSX.Element

Renders the `<ul>` list wrapper for {@link CommandPalette} results.

`CommandPaletteListProps`type

CommandPaletteListProps: Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> & {
  children?: unknown;
  ref?: Ref<HTMLUListElement>;
}

Props for the {@link CommandPaletteList } component.

children: children?: unknown;
ref: ref?: Ref<HTMLUListElement>;

`CommandPaletteProps`type

CommandPaletteProps: DialogProps

Props for the {@link CommandPalette } component.

`CommandPaletteTrigger`type

CommandPaletteTrigger: { (props: CommandPaletteTriggerProps): JSX.Element; (props: CommandPaletteTriggerAsChildProps): JSX.Element; }

Trigger that opens the {@link CommandPalette}, registering itself so focus returns here on close.

`CommandPaletteTriggerAsChildProps`type

CommandPaletteTriggerAsChildProps: DialogTriggerAsChildProps

Props for {@link CommandPaletteTrigger } rendered with `asChild`.

`CommandPaletteTriggerProps`type

CommandPaletteTriggerProps: DialogTriggerProps

Props for the {@link CommandPaletteTrigger } component.

`CommandSeparator`type

CommandSeparator: (props: CatalogComponentProps) => JSX.Element

Renders the `command-separator` part of the shadcn-compatible catalog primitives.

`CommandShortcut`type

CommandShortcut: (props: CatalogComponentProps) => JSX.Element

Renders the `command-shortcut` part of the shadcn-compatible catalog primitives.

`Container`type

Container: (props: ContainerProps) => JSX.Element

Centers content in a max-width column with page gutters (defaults to the `"page"` {@link BlockSize }).

`ContainerProps`type

ContainerProps: Omit<BlockDivProps, "maxWidth"> & {
  size?: BlockSize;
}

Props for the {@link Container } component.

size: size?: BlockSize | undefined;

`ContextMenu`type

Dropdown: (props: DropdownProps) => JSX.Element

Renders a part of `dropdown`.

`ContextMenuContent`type

DropdownContent$1: { (props: DropdownContentProps): JSX.Element | null; (props: DropdownContentAsChildProps): JSX.Element | null; }

Dropdown/context-menu content wrapper around `@askrjs/ui`'s `DropdownContent`. Non-`asChild` usage lazily evaluates `children` inside a body component so they're only rendered once the dropdown is actually open.

`ContextMenuGroup`type

DropdownGroup: (props: DropdownGroupProps | DropdownGroupAsChildProps) => JSX.Element

Renders the `dropdown-group` part of `dropdown` with `role="group"`. Supports polymorphic rendering via `asChild`.

`ContextMenuItem`type

DropdownItem: { (props: DropdownItemProps): JSX.Element | null; (props: DropdownItemAsChildProps): JSX.Element | null; }

Renders a part of `dropdown`. Supports polymorphic rendering via `asChild`.

`ContextMenuLabel`type

DropdownLabel: (props: DropdownLabelProps | DropdownLabelAsChildProps) => JSX.Element

Renders the `dropdown-label` part of `dropdown`. Supports polymorphic rendering via `asChild`.

`ContextMenuPortal`type

DropdownPortal: (props: DropdownPortalProps) => JSX.Element | null

Renders a part of `dropdown`.

`ContextMenuSeparator`type

DropdownSeparator: (props: DropdownSeparatorProps | DropdownSeparatorAsChildProps) => JSX.Element

Renders the `dropdown-separator` part of `dropdown` with `role="separator"`. Supports polymorphic rendering via `asChild`.

`ContextMenuTrigger`type

DropdownTrigger: { (props: DropdownTriggerProps): JSX.Element | null; (props: DropdownTriggerAsChildProps): JSX.Element | null; }

Renders the `dropdown-trigger` part of `dropdown`. Supports polymorphic rendering via `asChild`.

`CopyButton`type

CopyButton: (props: CopyButtonProps) => JSX.Element

Copies text with visual and assistive success/failure feedback.

`CopyButtonProps`type

CopyButtonProps: Omit<ButtonNativeProps, "children" | "onPress"> & {
  text: string;
  label: string;
  successMessage?: string;
  failureMessage?: string;
  resetAfter?: number;
}

failureMessage: failureMessage?: string | undefined;
label: label: string;
resetAfter: resetAfter?: number | undefined;
successMessage: successMessage?: string | undefined;
text: text: string;

`DataTable`type

DataTable: (props: CatalogComponentProps) => JSX.Element

Styling-only container for the `data-table` catalog slot. It does not sort, filter, select, or paginate data. Compose semantic `Table`/`VirtualTable` primitives with application-owned data state for those behaviors.

`DatePicker`type

DatePicker: (props: CatalogComponentProps) => JSX.Element

Styling-only `date-picker` container. It does not implement a popup calendar, formatting, or calendar-grid keyboard behavior; pair it with {@link DatePickerInput} for a native date input.

`DatePickerInput`type

DatePickerInput: (props: CatalogComponentProps) => JSX.Element

Native `<input type="date">` styling slot; browser behavior and localization remain native.

`DebouncedInput`type

DebouncedInput: (props: DebouncedInputProps) => JSX.Element

DebouncedInput is a convenience wrapper around Input that emits a settled value for search and filter surfaces.

`DEFAULT_THEME_OPTIONS`type

DEFAULT_THEME_OPTIONS: readonly ThemeOption[]

Default light/dark/system theme options used by {@link ThemeScope} and {@link ThemePicker}.

`Dialog`type

Dialog: (props: DialogProps) => JSX.Element

Coordinates the Dialog trigger, portal, overlay, and content.

```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```

`DialogClose`type

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DialogContent`type

DialogContent: { (props: DialogContentProps): JSX.Element | null; (props: DialogContentAsChildProps): JSX.Element | null; }

Renders the `dialog-content` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DialogDescription`type

DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }

Renders the `dialog-description` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DialogOverlay`type

DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }

`DialogPortal`type

DialogPortal: (props: DialogPortalProps) => JSX.Element | null

Renders a part of `dialog`.

`DialogProps`type

DialogProps: DialogOwnProps

Props for Dialog.

children: children?: unknown;
defaultOpen: defaultOpen?: boolean | undefined;
id: id?: string | undefined;
modal: modal?: boolean | undefined;
onOpenChange: onOpenChange?: ((open: boolean) => void) | undefined;
open: open?: boolean | undefined;

`DialogTitle`type

DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }

Renders the `dialog-title` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DialogTrigger`type

DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }

Renders the `dialog-trigger` part of `dialog`. Supports polymorphic rendering via `asChild`.

`Direction`type

Direction: (props: CatalogComponentProps & { dir?: "ltr" | "rtl"; }) => JSX.Element

Sets the `dir` attribute (defaulting to `"ltr"`) on its wrapping element for RTL/LTR scoping.

`Drawer`type

Dialog: (props: DialogProps) => JSX.Element

Coordinates the Dialog trigger, portal, overlay, and content.

```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```

`DrawerClose`type

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DrawerContent`type

DialogContent: { (props: DialogContentProps): JSX.Element | null; (props: DialogContentAsChildProps): JSX.Element | null; }

Renders the `dialog-content` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DrawerDescription`type

DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }

Renders the `dialog-description` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DrawerOverlay`type

DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }

`DrawerPortal`type

DialogPortal: (props: DialogPortalProps) => JSX.Element | null

Renders a part of `dialog`.

`DrawerTitle`type

DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }

Renders the `dialog-title` part of `dialog`. Supports polymorphic rendering via `asChild`.

`DrawerTrigger`type

DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }

Renders the `dialog-trigger` part of `dialog`. Supports polymorphic rendering via `asChild`.

`Dropdown`type

Dropdown: (props: DropdownProps) => JSX.Element

Renders a part of `dropdown`.

`DropdownContent`type

DropdownContent$1: { (props: DropdownContentProps): JSX.Element | null; (props: DropdownContentAsChildProps): JSX.Element | null; }

`DropdownGroup`type

DropdownGroup: (props: DropdownGroupProps | DropdownGroupAsChildProps) => JSX.Element

Renders the `dropdown-group` part of `dropdown` with `role="group"`. Supports polymorphic rendering via `asChild`.

`DropdownItem`type

DropdownItem: { (props: DropdownItemProps): JSX.Element | null; (props: DropdownItemAsChildProps): JSX.Element | null; }

Renders a part of `dropdown`. Supports polymorphic rendering via `asChild`.

`DropdownItemVariant`type

DropdownItemVariant: 'default' | 'destructive'

Dropdown Item Variant.

`DropdownLabel`type

DropdownLabel: (props: DropdownLabelProps | DropdownLabelAsChildProps) => JSX.Element

Renders the `dropdown-label` part of `dropdown`. Supports polymorphic rendering via `asChild`.

`DropdownMenu`type

Dropdown: (props: DropdownProps) => JSX.Element

Renders a part of `dropdown`.

`DropdownMenuContent`type

DropdownContent$1: { (props: DropdownContentProps): JSX.Element | null; (props: DropdownContentAsChildProps): JSX.Element | null; }

`DropdownMenuGroup`type

DropdownGroup: (props: DropdownGroupProps | DropdownGroupAsChildProps) => JSX.Element

Renders the `dropdown-group` part of `dropdown` with `role="group"`. Supports polymorphic rendering via `asChild`.

`DropdownMenuItem`type

DropdownItem: { (props: DropdownItemProps): JSX.Element | null; (props: DropdownItemAsChildProps): JSX.Element | null; }

Renders a part of `dropdown`. Supports polymorphic rendering via `asChild`.

`DropdownMenuLabel`type

DropdownLabel: (props: DropdownLabelProps | DropdownLabelAsChildProps) => JSX.Element

Renders the `dropdown-label` part of `dropdown`. Supports polymorphic rendering via `asChild`.

`DropdownMenuPortal`type

DropdownPortal: (props: DropdownPortalProps) => JSX.Element | null

Renders a part of `dropdown`.

`DropdownMenuSeparator`type

DropdownSeparator: (props: DropdownSeparatorProps | DropdownSeparatorAsChildProps) => JSX.Element

Renders the `dropdown-separator` part of `dropdown` with `role="separator"`. Supports polymorphic rendering via `asChild`.

`DropdownMenuTrigger`type

DropdownTrigger: { (props: DropdownTriggerProps): JSX.Element | null; (props: DropdownTriggerAsChildProps): JSX.Element | null; }

Renders the `dropdown-trigger` part of `dropdown`. Supports polymorphic rendering via `asChild`.

`DropdownPortal`type

DropdownPortal: (props: DropdownPortalProps) => JSX.Element | null

Renders a part of `dropdown`.

`DropdownSeparator`type

DropdownSeparator: (props: DropdownSeparatorProps | DropdownSeparatorAsChildProps) => JSX.Element

Renders the `dropdown-separator` part of `dropdown` with `role="separator"`. Supports polymorphic rendering via `asChild`.

`DropdownTrigger`type

DropdownTrigger: { (props: DropdownTriggerProps): JSX.Element | null; (props: DropdownTriggerAsChildProps): JSX.Element | null; }

Renders the `dropdown-trigger` part of `dropdown`. Supports polymorphic rendering via `asChild`.

`DropdownTriggerSize`type

DropdownTriggerSize: 'md' | 'icon'

Dropdown Trigger Size.

`DropdownTriggerVariant`type

DropdownTriggerVariant: 'default' | 'ghost'

Dropdown Trigger Variant.

`Empty`type

Empty: (props: CatalogComponentProps) => JSX.Element

Renders the `empty` part of the shadcn-compatible catalog primitives.

`EmptyContent`type

EmptyContent: (props: CatalogComponentProps) => JSX.Element

Renders the `empty-content` part of the shadcn-compatible catalog primitives.

`EmptyDescription`type

EmptyDescription: (props: CatalogComponentProps) => JSX.Element

Renders the `empty-description` part of the shadcn-compatible catalog primitives.

`EmptyHeader`type

EmptyHeader: (props: CatalogComponentProps) => JSX.Element

Renders the `empty-header` part of the shadcn-compatible catalog primitives.

`EmptyMedia`type

EmptyMedia: (props: CatalogComponentProps) => JSX.Element

Renders the `empty-media` part of the shadcn-compatible catalog primitives.

`EmptyState`type

EmptyState: (props: EmptyStateProps) => JSX.Element

Centered placeholder for empty lists/views: an icon, title (default `<h2>`), description, extra content, and an action row.

`EmptyStateHeadingTag`type

EmptyStateHeadingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Heading tag allowed for an empty state's title via `titleAs`.

`EmptyStateProps`type

EmptyStateProps: BlockDivProps & {
  icon?: unknown;
  title?: unknown;
  titleAs?: EmptyStateHeadingTag;
  description?: unknown;
  action?: unknown;
}

Props for the {@link EmptyState } component.

action: action?: unknown;
align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: "div" | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
description: description?: unknown;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
icon: icon?: unknown;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
title: title?: unknown;
titleAs: titleAs?: EmptyStateHeadingTag | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`EmptyTitle`type

EmptyTitle: (props: CatalogComponentProps) => JSX.Element

Renders the `empty-title` part of the shadcn-compatible catalog primitives.

`Field`type

Field: (props: FieldProps) => JSX.Element

Groups a form control with its hint/error text, marking `data-invalid` when `invalid` is set.

`FieldContent`type

FieldContent: (props: CatalogComponentProps) => JSX.Element

Renders the `field-content` part of the shadcn-compatible catalog primitives.

`FieldDescription`type

FieldDescription: (props: CatalogComponentProps) => JSX.Element

Renders the `field-description` part of the shadcn-compatible catalog primitives.

`FieldError`type

FieldError: (props: FieldErrorProps) => JSX.Element

Renders validation error text for a {@link Field}, exposed with `role="alert"`.

`FieldErrorProps`type

FieldErrorProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}

Props for the {@link FieldError } component.

children: children?: unknown;
ref: ref?: Ref<HTMLParagraphElement>;

`FieldGroup`type

FieldGroup: (props: CatalogComponentProps) => JSX.Element

Renders the `field-group` part of the shadcn-compatible catalog primitives.

`FieldHint`type

FieldHint: (props: FieldHintProps) => JSX.Element

Renders supporting hint text for a {@link Field}.

`FieldHintProps`type

FieldHintProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}

Props for the {@link FieldHint } component.

children: children?: unknown;
ref: ref?: Ref<HTMLParagraphElement>;

`FieldLabel`type

FieldLabel: (props: CatalogComponentProps) => JSX.Element

Renders the `field-label` part of the shadcn-compatible catalog primitives.

`FieldLegend`type

FieldLegend: (props: CatalogComponentProps) => JSX.Element

Renders the `field-legend` part of the shadcn-compatible catalog primitives.

`FieldProps`type

FieldProps: DivProps & {
  children?: unknown;
  invalid?: boolean;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link Field } component.

children: children?: unknown;
invalid: invalid?: boolean | undefined;
ref: ref?: Ref<HTMLDivElement>;

`FieldSeparator`type

FieldSeparator: (props: CatalogComponentProps) => JSX.Element

Renders the `field-separator` part of the shadcn-compatible catalog primitives.

`FieldSet`type

FieldSet: (props: CatalogComponentProps) => JSX.Element

Renders the `field-set` part of the shadcn-compatible catalog primitives.

`FieldTitle`type

FieldTitle: (props: CatalogComponentProps) => JSX.Element

Renders the `field-title` part of the shadcn-compatible catalog primitives.

`Footer`type

Footer: (props: FooterProps) => JSX.Element

Renders a `<footer>`-element {@link Block } with a muted background and top border.

`FooterContent`type

FooterContent: (props: FooterContentProps) => JSX.Element

Renders the main content wrapper of a {@link Footer}.

`FooterContentProps`type

FooterContentProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link FooterContent } component.

children: children?: unknown;
ref: ref?: Ref<HTMLDivElement>;

`FooterDescription`type

FooterDescription: (props: FooterDescriptionProps) => JSX.Element

Renders supporting description text within a {@link Footer}.

`FooterDescriptionProps`type

FooterDescriptionProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}

Props for the {@link FooterDescription } component.

children: children?: unknown;
ref: ref?: Ref<HTMLParagraphElement>;

`FooterLink`type

FooterLink: (props: FooterLinkProps) => JSX.Element

Renders a single link within a {@link Footer}.

`FooterLinkProps`type

FooterLinkProps: AnchorProps & {
  children?: unknown;
  ref?: Ref<HTMLAnchorElement>;
}

Props for the {@link FooterLink } component.

children: children?: unknown;
ref: ref?: Ref<HTMLAnchorElement>;

`FooterLinks`type

FooterLinks: (props: FooterLinksProps) => JSX.Element

Renders a `<nav>` wrapper for a group of {@link FooterLink}s.

`FooterLinksProps`type

FooterLinksProps: NavProps & {
  children?: unknown;
  ref?: Ref<HTMLElement>;
}

Props for the {@link FooterLinks } component.

children: children?: unknown;
ref: ref?: Ref<HTMLElement>;

`FooterProps`type

FooterProps: Omit<BlockElementProps<"footer">, "as">

Props for the {@link Footer } component.

`FooterSection`type

FooterSection: (props: FooterSectionProps) => JSX.Element

Renders a grouped section within a {@link Footer}.

`FooterSectionProps`type

FooterSectionProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link FooterSection } component.

children: children?: unknown;
ref: ref?: Ref<HTMLDivElement>;

`FooterTitle`type

FooterTitle: (props: FooterTitleProps) => JSX.Element

Renders a section title (`<h2>`) within a {@link Footer}.

`FooterTitleProps`type

FooterTitleProps: HeadingProps & {
  children?: unknown;
  ref?: Ref<HTMLHeadingElement>;
}

Props for the {@link FooterTitle } component.

children: children?: unknown;
ref: ref?: Ref<HTMLHeadingElement>;

`Form`type

Form: { (props: FormProps): JSX.Element; (props: FormAsChildProps): JSX.Element; }

Renders a part of `form`. Supports polymorphic rendering via `asChild`.

`Grid`type

Grid: <TElement extends GridElement = "div">(props: GridProps<TElement>) => JSX.Element

CSS grid layout primitive: turns `columns`/`gap`/`align` (each optionally responsive) into generated grid-template styles, rendering as `<div>` by default.

`GridAlign`type

GridAlign: "start" | "center" | "end" | "stretch"

`align-items` value applied to a {@link Grid }.

`GridColumns`type

GridColumns: number | string

Column definition for {@link Grid }: a track count or a raw `grid-template-columns` string.

`GridElement`type

GridElement: "div" | "section" | "ul"

Element tags {@link Grid } can render as via its `as` prop.

`GridProps`type

GridProps: GridIntrinsicProps<TElement> & {
  as?: TElement;
  columns?: ResponsiveValue<GridColumns>;
  gap?: ResponsiveValue<BlockSpace>;
  align?: ResponsiveValue<GridAlign>;
  children?: unknown;
  ref?: Ref<HTMLElement>;
}

Props for the {@link Grid } component, specialized for a given {@link GridElement} `TElement`.

align: align?: ResponsiveValue<GridAlign> | undefined;
as: as?: TElement | undefined;
children: children?: unknown;
columns: columns?: ResponsiveValue<GridColumns> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
ref: ref?: Ref<HTMLElement>;

`Header`type

Header: (props: HeaderProps) => JSX.Element

Renders a `<header>`-element {@link Block } with a surface background and bottom border, optionally sticky-positioned via `position`/`sticky`.

`HeaderProps`type

HeaderProps: Omit<BlockElementProps<"header">, "as" | "sticky"> & {
  position?: "sticky" | "static";
  sticky?: boolean;
}

Props for the {@link Header } component.

position: position?: "sticky" | "static" | undefined;
sticky: sticky?: boolean | undefined;

`HoverCard`type

HoverCard: (props: HoverCardProps) => JSX.Element

Renders a part of `hover-card`.

`HoverCardContent`type

HoverCardContent: { (props: HoverCardContentProps): JSX.Element | null; (props: HoverCardContentAsChildProps): JSX.Element | null; }

Renders the `hover-card-content` part of `hover-card` with `role="dialog"`. Supports polymorphic rendering via `asChild`.

`HoverCardPortal`type

HoverCardPortal: (props: HoverCardPortalProps) => JSX.Element | null

Renders a part of `hover-card`.

`HoverCardTrigger`type

HoverCardTrigger: { (props: HoverCardTriggerProps): JSX.Element; (props: HoverCardTriggerAsChildProps): JSX.Element; }

Renders the `hover-card-trigger` part of `hover-card`. Supports polymorphic rendering via `asChild`.

`Inline`type

Inline: (props: LegacyLayoutProps) => JSX.Element

`Input`type

Input: { (props: InputInputProps): JSX.Element; (props: InputAsChildProps): JSX.Element; }

Renders the `input` part of `input`. Supports polymorphic rendering via `asChild`.

`InputGroup`type

InputGroup: (props: InputGroupProps) => JSX.Element

Groups related inputs/addons together, optionally visually attached, with a horizontal or vertical orientation and `role="group"` by default.

`InputGroupOrientation`type

InputGroupOrientation: "horizontal" | "vertical"

Layout direction of an {@link InputGroup }.

`InputGroupProps`type

InputGroupProps: DivProps & {
  children?: unknown;
  attached?: boolean;
  orientation?: InputGroupOrientation;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link InputGroup } component.

attached: attached?: boolean | undefined;
children: children?: unknown;
orientation: orientation?: InputGroupOrientation | undefined;
ref: ref?: Ref<HTMLDivElement>;

`InputGroupText`type

InputGroupText: { (props: InputGroupTextProps): JSX.Element; (props: InputGroupTextAsChildProps): JSX.Element; }

Renders static text/label content within an {@link InputGroup}.

`InputGroupTextAsChildProps`type

InputGroupTextAsChildProps: SpanProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link InputGroupText } rendered with `asChild`, merging its attributes onto a single child element.

asChild: asChild: true;
children: children: JSXElement;
ref: ref?: Ref<unknown>;

`InputGroupTextProps`type

InputGroupTextProps: SpanProps & {
  asChild?: false;
  children?: unknown;
  ref?: Ref<HTMLSpanElement>;
}

Props for {@link InputGroupText } rendered as its default `<span>` element.

asChild: asChild?: false | undefined;
children: children?: unknown;
ref: ref?: Ref<HTMLSpanElement>;

`InputOTP`type

InputOTP: (props: CatalogComponentProps) => JSX.Element

Styling-only OTP anatomy; it does not render an input or own value, focus, paste, or validation behavior.

`InputOTPGroup`type

InputOTPGroup: (props: CatalogComponentProps) => JSX.Element

Renders the `input-otp-group` part of the shadcn-compatible catalog primitives.

`InputOTPSeparator`type

InputOTPSeparator: (props: CatalogComponentProps) => JSX.Element

Renders the visual separator between InputOTP groups (defaults to `"-"`).

`InputOTPSlot`type

InputOTPSlot: (props: CatalogComponentProps) => JSX.Element

Renders the `input-otp-slot` part of the shadcn-compatible catalog primitives.

`Item`type

Item: (props: CatalogComponentProps & { active?: boolean; size?: "default" | "sm" | "xs"; variant?: "default" | "outline" | "muted"; }) => JSX.Element

Renders a generic list item part, exposing `active`/`size`/`variant` as data attributes.

`ItemActions`type

ItemActions: (props: CatalogComponentProps) => JSX.Element

Renders the `item-actions` part of the shadcn-compatible catalog primitives.

`ItemContent`type

ItemContent: (props: CatalogComponentProps) => JSX.Element

Renders the `item-content` part of the shadcn-compatible catalog primitives.

`ItemDescription`type

ItemDescription: (props: CatalogComponentProps) => JSX.Element

Renders the `item-description` part of the shadcn-compatible catalog primitives.

`ItemFooter`type

ItemFooter: (props: CatalogComponentProps) => JSX.Element

Renders the `item-footer` part of the shadcn-compatible catalog primitives.

`ItemGroup`type

ItemGroup: (props: CatalogComponentProps) => JSX.Element

Renders the `item-group` part of the shadcn-compatible catalog primitives.

`ItemHeader`type

ItemHeader: (props: CatalogComponentProps) => JSX.Element

Renders the `item-header` part of the shadcn-compatible catalog primitives.

`ItemMedia`type

ItemMedia: (props: CatalogComponentProps) => JSX.Element

Renders the `item-media` part of the shadcn-compatible catalog primitives.

`ItemTitle`type

ItemTitle: (props: CatalogComponentProps) => JSX.Element

Renders the `item-title` part of the shadcn-compatible catalog primitives.

`Kbd`type

Kbd: (props: CatalogComponentProps) => JSX.Element

Renders the `kbd` part of the shadcn-compatible catalog primitives.

`Label`type

Label: { (props: LabelLabelProps): JSXElement; (props: LabelAsChildProps): JSXElement; }

Renders the `label` part of `label`. Supports polymorphic rendering via `asChild`.

`LegacyLayoutProps`type

LegacyLayoutProps: Omit<BlockLayoutProps, "gap" | "padding" | "wrap"> & LegacyStructuralProps & LegacyLayoutConveniences

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: BlockElement | undefined;
asChild: asChild?: boolean | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<LegacySpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
p: p?: ResponsiveValue<LegacySpace> | undefined;
padding: padding?: ResponsiveValue<LegacySpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<LegacyWrap> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`Main`type

Main: (props: MainProps) => JSX.Element

Renders a `<main>`-element {@link Block } that grows to fill available space.

`MainProps`type

MainProps: Omit<BlockElementProps<"main">, "as">

Props for the {@link Main } component.

`Menubar`type

Menubar: (props: MenubarProps) => JSX.Element

Renders a part of `menubar`.

`MenubarContent`type

MenubarContent: { (props: MenubarContentProps): JSX.Element | null; (props: MenubarContentAsChildProps): JSX.Element | null; }

Renders a part of `menubar`.

`MenubarGroup`type

MenubarGroup: (props: MenubarGroupProps | MenubarGroupAsChildProps) => JSX.Element

Renders the `menubar-group` part of `menubar` with `role="group"`. Supports polymorphic rendering via `asChild`.

`MenubarItem`type

MenubarItem: { (props: MenubarItemProps): JSX.Element | null; (props: MenubarItemAsChildProps): JSX.Element | null; }

Renders a part of `menubar`. Supports polymorphic rendering via `asChild`.

`MenubarLabel`type

MenubarLabel: (props: MenubarLabelProps | MenubarLabelAsChildProps) => JSX.Element

Renders the `menubar-label` part of `menubar`. Supports polymorphic rendering via `asChild`.

`MenubarMenu`type

MenubarMenu: (props: MenubarMenuProps) => JSX.Element

Renders a part of `menubar`.

`MenubarPortal`type

MenubarPortal: (props: MenubarPortalProps) => JSX.Element | null

Renders a part of `menubar`.

`MenubarSeparator`type

MenubarSeparator: (props: MenubarSeparatorProps | MenubarSeparatorAsChildProps) => JSX.Element

Renders the `menubar-separator` part of `menubar` with `role="separator"`. Supports polymorphic rendering via `asChild`.

`MenubarSub`type

MenubarSub: (props: MenubarSubProps) => JSX.Element

Renders a part of `menubar`.

`MenubarSubContent`type

MenubarSubContent: { (props: MenubarSubContentProps): JSX.Element | null; (props: MenubarSubContentAsChildProps): JSX.Element | null; }

Renders a part of `menubar`.

`MenubarSubTrigger`type

MenubarSubTrigger: { (props: MenubarSubTriggerProps): JSX.Element | null; (props: MenubarSubTriggerAsChildProps): JSX.Element | null; }

Renders a part of `menubar`. Supports polymorphic rendering via `asChild`.

`MenubarTrigger`type

MenubarTrigger: { (props: MenubarTriggerProps): JSX.Element | null; (props: MenubarTriggerAsChildProps): JSX.Element | null; }

Renders a part of `menubar`. Supports polymorphic rendering via `asChild`.

`MetaStrip`type

MetaStrip: (props: MetaStripProps) => JSX.Element

Semantic compact key/value facts with consistent inline or stacked wrapping.

`MetaStripDensity`type

MetaStripDensity: "inline" | "stacked"

`MetaStripItem`type

MetaStripItem: {
  label: string;
  value: string | number;
  caption?: string;
  font?: "body" | "mono";
  numeric?: "normal" | "tabular";
}

`MetaStripProps`type

MetaStripProps: Omit<JSX.IntrinsicElements["dl"], "children" | "ref"> & {
  items: readonly MetaStripItem[];
  density?: MetaStripDensity;
  ref?: Ref<HTMLDListElement>;
}

density: density?: MetaStripDensity | undefined;
items: items: readonly MetaStripItem[];
ref: ref?: Ref<HTMLDListElement>;

`NativeSelect`type

NativeSelect: (props: CatalogComponentProps) => JSX.Element

Renders a styled native `<select>` element.

`Nav`type

Navbar: (props: NavbarProps) => JSX.Element

Horizontal navigation bar. Below `collapseAt`/`breakpoint`, non-brand children are grouped behind a collapsible toggle so brand content stays visible while the rest collapses on small screens.

`Navbar`type

Navbar: (props: NavbarProps) => JSX.Element

Horizontal navigation bar. Below `collapseAt`/`breakpoint`, non-brand children are grouped behind a collapsible toggle so brand content stays visible while the rest collapses on small screens.

`NavbarCollapseBreakpoint`type

NavbarCollapseBreakpoint: "sm" | "md" | "lg" | "xl"

Breakpoint at which a {@link Navbar } collapses non-brand content behind a toggle.

`NavbarProps`type

NavbarProps: Omit<BlockElementProps<"nav">, "as" | "direction" | "align"> & {
  breakpoint?: NavbarCollapseBreakpoint | false;
  collapseAt?: NavbarCollapseBreakpoint | false;
  collapseLabel?: string;
  collapseIcon?: unknown;
}

Props for the {@link Navbar } component.

breakpoint: breakpoint?: false | NavbarCollapseBreakpoint | undefined;
collapseAt: collapseAt?: false | NavbarCollapseBreakpoint | undefined;
collapseIcon: collapseIcon?: unknown;
collapseLabel: collapseLabel?: string | undefined;

`NavBrand`type

NavBrand: (props: NavBrandProps) => JSX.Element

Renders the brand/logo slot of a {@link Navbar}; excluded from the collapsible section.

`NavBrandProps`type

NavBrandProps: BlockDivProps | BlockElementProps<"a"> | BlockAsChildProps

Props for the {@link NavBrand } component.

align: align?: ResponsiveValue<BlockAlign> | undefined;
asChild: asChild?: boolean | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`NavDropdown`type

NavDropdown: (props: NavDropdownProps) => JSX.Element

Renders a dropdown menu triggered from within a {@link Navbar}.

`NavDropdownProps`type

NavDropdownProps: Omit<DropdownProps, "children"> & Pick<DropdownContentOwnProps, "align" | "side" | "sideOffset"> & {
  label: unknown;
  children?: unknown;
}

Props for the {@link NavDropdown } component.

children: children?: unknown;
label: label: unknown;

`NavGroup`type

NavGroup: (props: NavGroupProps) => JSX.Element

Groups related {@link Navbar} items under an optional label.

`NavGroupProps`type

NavGroupProps: Omit<BlockDivProps, "title"> & {
  label?: unknown;
  title?: unknown;
}

Props for the {@link NavGroup } component.

label: label?: unknown;
title: title?: unknown;

`NavigationMenu`type

NavigationMenu: (props: CatalogComponentProps) => JSX.Element

Styling-only navigation-menu anatomy; it does not own disclosure, roving focus, or keyboard behavior.

`NavigationMenuContent`type

NavigationMenuContent: (props: CatalogComponentProps) => JSX.Element

Renders the `navigation-menu-content` part of the shadcn-compatible catalog primitives.

`NavigationMenuIndicator`type

NavigationMenuIndicator: (props: CatalogComponentProps) => JSX.Element

Renders the `navigation-menu-indicator` part of the shadcn-compatible catalog primitives.

`NavigationMenuItem`type

NavigationMenuItem: (props: CatalogComponentProps) => JSX.Element

Renders the `navigation-menu-item` part of the shadcn-compatible catalog primitives.

`NavigationMenuLink`type

NavigationMenuLink: (props: CatalogComponentProps) => JSX.Element

Renders the `navigation-menu-link` part of the shadcn-compatible catalog primitives.

`NavigationMenuList`type

NavigationMenuList: (props: CatalogComponentProps) => JSX.Element

Renders the `navigation-menu-list` part of the shadcn-compatible catalog primitives.

`NavigationMenuTrigger`type

NavigationMenuTrigger: (props: CatalogComponentProps) => JSX.Element

Renders the `navigation-menu-content` part of the shadcn-compatible catalog primitives.

`NavigationMenuViewport`type

NavigationMenuViewport: (props: CatalogComponentProps) => JSX.Element

Renders the `navigation-menu-viewport` part of the shadcn-compatible catalog primitives.

`NavItem`type

NavItem: { (props: NavItemProps): JSX.Element; (props: NavItemAsChildProps): JSX.Element; }

A generic navigation item, rendered as an `<a>` (or, with `asChild`, merged onto a child), highlighted when `active`.

`NavItemAsChildProps`type

NavItemAsChildProps: Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link NavItem } rendered with `asChild`, merging onto a single child element.

active: active?: boolean | undefined;
asChild: asChild: true;
children: children: JSXElement;
ref: ref?: Ref<unknown>;

`NavItemProps`type

NavItemProps: Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLAnchorElement>;
}

Props for {@link NavItem } rendered as its default `<a>` element.

active: active?: boolean | undefined;
asChild: asChild?: false | undefined;
children: children?: unknown;
ref: ref?: Ref<HTMLAnchorElement>;

`NavLink`type

NavLink: (props: NavLinkProps) => JSX.Element

A router-aware navigation link that highlights itself when its route matches the current location.

`NavLinkProps`type

NavLinkProps: LinkProps & NavLinkOwnProps

Props for the {@link NavLink } component.

active: active?: boolean | undefined;
match: match?: NavLinkMatch | undefined;

`Page`type

Page: (props: PageProps) => JSX.Element

Top-level page wrapper: a growing `<main>` containing a {@link Container } with vertical page padding and content spacing.

`PageHeader`type

PageHeader: (props: PageHeaderProps) => JSX.Element

Page-level header with a title, optional description, and an actions row that wraps to a new line on small screens.

`PageHeaderProps`type

PageHeaderProps: Omit<BlockDivProps, "direction" | "rowFrom"> & {
  title: unknown;
  description?: unknown;
  actions?: unknown;
  direction?: never;
  rowFrom?: never;
}

Props for the {@link PageHeader } component.

actions: actions?: unknown;
description: description?: unknown;
direction: direction?: undefined;
rowFrom: rowFrom?: undefined;
title: title: unknown;

`PageProps`type

PageProps: MainProps

Props for the {@link Page } component.

`Pagination`type

Pagination: (props: CatalogComponentProps) => JSX.Element

Renders the `pagination` part of the shadcn-compatible catalog primitives.

`PaginationContent`type

PaginationContent: (props: CatalogComponentProps) => JSX.Element

Renders the `pagination-content` part of the shadcn-compatible catalog primitives.

`PaginationEllipsis`type

PaginationEllipsis: (props: CatalogComponentProps) => JSX.Element

Renders a non-interactive ellipsis marker between pagination links.

`PaginationItem`type

PaginationItem: (props: CatalogComponentProps) => JSX.Element

Renders the `pagination-item` part of the shadcn-compatible catalog primitives.

`PaginationLink`type

PaginationLink: (props: CatalogComponentProps & { active?: boolean; }) => JSX.Element

Renders a pagination page link, marking it `aria-current="page"` when `active`.

`PaginationNext`type

PaginationNext: (props: CatalogComponentProps) => JSX.Element

Pagination link that moves to the next page.

`PaginationPrevious`type

PaginationPrevious: (props: CatalogComponentProps) => JSX.Element

Pagination link that moves to the previous page.

`Pill`type

Pill: (props: PillProps) => JSX.Element

A router-aware link styled as a pill, auto-marked active by matching the current route, with an active background highlight.

`PillProps`type

PillProps: LinkProps & NavLinkOwnProps

Props for the {@link Pill } component.

active: active?: boolean | undefined;
match: match?: NavLinkMatch | undefined;

`Pills`type

Pills: { (props: PillsProps): JSX.Element; (props: PillsAsChildProps): JSX.Element; }

Renders a `<nav>` wrapper (or, with `asChild`, merges onto a child) for a set of {@link Pill} links.

`PillsAsChildProps`type

PillsAsChildProps: Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & PillsOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link Pills } rendered with `asChild`, merging onto a single child element.

asChild: asChild: true;
children: children: JSXElement;
ref: ref?: Ref<unknown>;

`PillsProps`type

PillsProps: Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & PillsOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLElement>;
}

Props for {@link Pills } rendered as its default `<nav>` element.

asChild: asChild?: false | undefined;
children: children?: unknown;
ref: ref?: Ref<HTMLElement>;

`Popover`type

Popover: (props: PopoverProps) => JSX.Element

Renders a part of `popover`.

`PopoverClose`type

PopoverClose: { (props: PopoverCloseProps): JSX.Element; (props: PopoverCloseAsChildProps): JSX.Element; }

Renders the `popover-close` part of `popover`. Supports polymorphic rendering via `asChild`.

`PopoverContent`type

PopoverContent: { (props: PopoverContentProps): JSX.Element | null; (props: PopoverContentAsChildProps): JSX.Element | null; }

Renders the `popover-content` part of `popover` with `role="dialog"`. Supports polymorphic rendering via `asChild`.

`PopoverContentWidth`type

PopoverContentWidth: 'sm' | 'md' | 'lg'

Popover Content Width.

`PopoverPortal`type

PopoverPortal: (props: PopoverPortalProps) => JSX.Element | null

Renders a part of `popover`.

`PopoverTrigger`type

PopoverTrigger: { (props: PopoverTriggerProps): JSX.Element; (props: PopoverTriggerAsChildProps): JSX.Element; }

Renders the `popover-trigger` part of `popover`. Supports polymorphic rendering via `asChild`.

`Progress`type

Progress: (props: ProgressProps) => JSX.Element

Renders the `progress` part of `progress` with `role="progressbar"`.

`ProgressCircle`type

ProgressCircle: (props: ProgressCircleProps) => JSX.Element

Headless circular progress indicator root. Normalizes value/max, computes percentage, exposes `--ak-progress-percentage` as a dynamically injected CSS custom property, and provides progress state to `ProgressCircleIndicator` via context.

`ProgressCircleIndicator`type

ProgressCircleIndicator: { (props: ProgressCircleIndicatorProps): JSX.Element; (props: ProgressCircleIndicatorAsChildProps): JSX.Element; }

Visual indicator for `ProgressCircle`, rendering the fill/arc element. Must be used within a `ProgressCircle`; reads progress state from context and exposes it as `data-state`/`data-value`/`data-max`/`data-percentage`.

`ProgressIndicator`type

ProgressIndicator: { (props: ProgressIndicatorProps): JSX.Element; (props: ProgressIndicatorAsChildProps): JSX.Element; }

Renders the `progress-indicator` part of `progress`. Supports polymorphic rendering via `asChild`.

`RadioGroup`type

RadioGroup: (props: RadioGroupProps) => JSX.Element

Renders a part of `radio-group`.

`RadioGroupItem`type

RadioGroupItem: { (props: RadioGroupItemProps): JSX.Element; (props: RadioGroupItemAsChildProps): JSX.Element; }

Renders the `radio-group-item` part of `radio-group` with `role="radio"`. Supports polymorphic rendering via `asChild`.

`ResizableHandle`type

ResizableHandle: (props: CatalogComponentProps) => JSX.Element

Styling-only separator slot; it does not implement resizing, pointer dragging, or keyboard controls.

`ResizablePanel`type

ResizablePanel: (props: CatalogComponentProps) => JSX.Element

Styling-only `resizable-panel` slot; it does not implement resizing or manage panel dimensions.

`ResizablePanelGroup`type

ResizablePanelGroup: (props: CatalogComponentProps) => JSX.Element

Styling-only container for the `resizable-panel-group` catalog slot. It does not implement resizing. Consumers own pointer, keyboard, sizing, and ARIA state until a behavior primitive exists in `@askrjs/ui`.

`ScrollArea`type

ScrollArea: { (props: ScrollAreaProps): JSX.Element; (props: ScrollAreaAsChildProps): JSX.Element; }

Renders a part of `scroll-area`.

`ScrollAreaCorner`type

ScrollAreaCorner: (props: ScrollAreaCornerProps) => JSX.Element

Renders the `scroll-area-corner` part of `scroll-area`.

`ScrollAreaScrollbar`type

ScrollAreaScrollbar: (props: ScrollAreaScrollbarProps) => JSX.Element

Renders the `scroll-area-scrollbar` part of `scroll-area` with `role="scrollbar"`.

`ScrollAreaThumb`type

ScrollAreaThumb: (props: ScrollAreaThumbProps) => JSX.Element

Renders the `scroll-area-thumb` part of `scroll-area`.

`ScrollAreaViewport`type

ScrollAreaViewport: { (props: ScrollAreaViewportProps): JSX.Element; (props: ScrollAreaViewportAsChildProps): JSX.Element; }

Renders a part of `scroll-area`.

`Section`type

Section: (props: SectionProps) => JSX.Element

Renders a `<section>`-element {@link Block } with vertical spacing between children and page padding.

`SectionProps`type

SectionProps: Omit<BlockElementProps<"section">, "as">

Props for the {@link Section } component.

`Select`type

Select: (props: SelectProps) => JSX.Element

Renders a part of `select`.

`SelectContent`type

SelectContent: { (props: SelectContentProps): JSX.Element | null; (props: SelectContentAsChildProps): JSX.Element | null; }

Renders a part of `select` with `role="listbox"`. Supports polymorphic rendering via `asChild`.

`SelectGroup`type

SelectGroup: { (props: SelectGroupProps): JSX.Element; (props: SelectGroupAsChildProps): JSX.Element; }

Renders the `select-group` part of `select` with `role="group"`. Supports polymorphic rendering via `asChild`.

`SelectItem`type

SelectItem: { (props: SelectItemProps): JSX.Element | null; (props: SelectItemAsChildProps): JSX.Element | null; }

Renders a part of `select`. Supports polymorphic rendering via `asChild`.

`SelectItemText`type

SelectItemText: { (props: SelectItemTextProps): JSX.Element; (props: SelectItemTextAsChildProps): JSX.Element; }

SelectItemText marks the item text node so Select can resolve labels and style the text slot directly. Renders the `select-item-text` part of `select`. Supports polymorphic rendering via `asChild`.

`SelectLabel`type

SelectLabel: { (props: SelectLabelProps): JSX.Element | null; (props: SelectLabelAsChildProps): JSX.Element | null; }

Renders the `select-label` part of `select`. Supports polymorphic rendering via `asChild`.

`SelectPortal`type

SelectPortal: (props: SelectPortalProps) => JSX.Element | null

Renders a part of `select`.

`SelectSeparator`type

SelectSeparator: { (props: SelectSeparatorProps): JSX.Element | null; (props: SelectSeparatorAsChildProps): JSX.Element | null; }

Renders the `select-separator` part of `select` with `role="separator"`. Supports polymorphic rendering via `asChild`.

`SelectTrigger`type

SelectTrigger: { (props: SelectTriggerProps): JSX.Element | null; (props: SelectTriggerAsChildProps): JSX.Element | null; }

Renders the `select-trigger` part of `select`. Supports polymorphic rendering via `asChild`.

`SelectTriggerSize`type

SelectTriggerSize: 'sm' | 'md' | 'lg'

Select Trigger Size.

`SelectValue`type

SelectValue: { (props: SelectValueProps): JSX.Element | null; (props: SelectValueAsChildProps): JSX.Element | null; }

Renders the `select-value` part of `select`. Supports polymorphic rendering via `asChild`.

`Separator`type

Separator: { (props: SeparatorNativeProps): JSX.Element; (props: SeparatorAsChildProps): JSX.Element; }

Visual divider, defaulting to horizontal `role="separator"`; pass `decorative` to drop the semantic role, or `asChild` to merge onto a single child element.

`SeparatorAsChildProps`type

SeparatorAsChildProps: SeparatorOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link Separator } rendered with `asChild`, merging its attributes onto a single child element.

asChild: asChild: true;
children: children: JSXElement;
decorative: decorative?: boolean | undefined;
orientation: orientation?: "vertical" | "horizontal" | undefined;
ref: ref?: Ref<unknown>;

`SeparatorNativeProps`type

SeparatorNativeProps: Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SeparatorOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}

Props for {@link Separator } rendered as its default `<div>` element.

asChild: asChild?: false | undefined;
children: children?: unknown;
decorative: decorative?: boolean | undefined;
orientation: orientation?: "vertical" | "horizontal" | undefined;
ref: ref?: Ref<HTMLDivElement>;

`SeparatorOwnProps`type

SeparatorOwnProps: {
  decorative?: boolean;
  orientation?: "horizontal" | "vertical";
  children?: unknown;
}

Props shared by both {@link Separator } call signatures.

children: children?: unknown;
decorative: decorative?: boolean | undefined;
orientation: orientation?: "vertical" | "horizontal" | undefined;

`SeparatorProps`type

SeparatorProps: SeparatorNativeProps | SeparatorAsChildProps

Union of all prop shapes accepted by {@link Separator }.

asChild: asChild?: boolean | undefined;
children: children?: unknown;
decorative: decorative?: boolean | undefined;
orientation: orientation?: "vertical" | "horizontal" | undefined;
ref: ref?: ((value: unknown) => void) | { current: unknown; } | ((value: HTMLDivElement | null) => void) | { current: HTMLDivElement | null; } | null | undefined;

`Sheet`type

Dialog: (props: DialogProps) => JSX.Element

Coordinates the Dialog trigger, portal, overlay, and content.

```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```

`SheetClose`type

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

`SheetContent`type

SheetContent: (props: CatalogComponentProps & { side?: "top" | "right" | "bottom" | "left"; }) => JSX.Element

Sheet variant of the dialog content part; defaults to sliding in from the right.

`SheetDescription`type

SheetDescription: (props: CatalogComponentProps) => JSX.Element

Sheet variant of the dialog description part.

`SheetFooter`type

SheetFooter: (props: CatalogComponentProps) => JSX.Element

Renders the `sheet-footer` part of the shadcn-compatible catalog primitives.

`SheetHeader`type

SheetHeader: (props: CatalogComponentProps) => JSX.Element

Renders the `sheet-header` part of the shadcn-compatible catalog primitives.

`SheetOverlay`type

DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }

`SheetPortal`type

DialogPortal: (props: DialogPortalProps) => JSX.Element | null

Renders a part of `dialog`.

`SheetTitle`type

SheetTitle: (props: CatalogComponentProps) => JSX.Element

Sheet variant of the dialog title part.

`SheetTrigger`type

DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }

Renders the `dialog-trigger` part of `dialog`. Supports polymorphic rendering via `asChild`.

`Shell`type

Shell: (props: LegacyLayoutProps & { variant?: string; }) => JSX.Element

`ShellMain`type

ShellMain: (props: LegacyLayoutProps) => JSX.Element

`ShellNav`type

ShellNav: (props: LegacyLayoutProps) => JSX.Element

`Sidebar`type

Sidebar: (props: SidebarProps) => JSX.Element

Root `<aside>` sidebar layout with configurable width, side, collapse behavior, and visual variant, exposed as data attributes for CSS.

`SidebarButtonProps`type

SidebarButtonProps: JSX.IntrinsicElements["button"] & {
  active?: boolean;
  asChild?: boolean;
  size?: "default" | "sm" | "lg";
  tooltip?: string;
  tooltipSide?: SidebarTooltipSide;
  variant?: "default" | "outline";
}

Props shared by the interactive {@link Sidebar } button parts (menu button, action, trigger).

active: active?: boolean | undefined;
asChild: asChild?: boolean | undefined;
size: size?: "sm" | "lg" | "default" | undefined;
tooltip: tooltip?: string | undefined;
tooltipSide: tooltipSide?: SidebarTooltipSide | undefined;
variant: variant?: "default" | "outline" | undefined;

`SidebarCollapsible`type

SidebarCollapsible: "offcanvas" | "icon" | "none"

How a {@link Sidebar } collapses: fully off-canvas, down to icons only, or not at all.

`SidebarContent`type

SidebarContent: (props: SidebarPartProps) => JSX.Element

Renders the scrollable content region of a {@link Sidebar}.

`SidebarFooter`type

SidebarFooter: (props: SidebarPartProps) => JSX.Element

Renders the footer region of a {@link Sidebar}.

`SidebarGroup`type

SidebarGroup: (props: SidebarPartProps) => JSX.Element

Groups related {@link SidebarMenu} items together.

`SidebarGroupContent`type

SidebarGroupContent: (props: SidebarPartProps) => JSX.Element

Renders the content region of a {@link SidebarGroup}.

`SidebarGroupLabel`type

SidebarGroupLabel: (props: SidebarPartProps) => JSX.Element

Renders the label for a {@link SidebarGroup}.

`SidebarHeader`type

SidebarHeader: (props: SidebarPartProps) => JSX.Element

Renders the header region of a {@link Sidebar}.

`SidebarInset`type

SidebarInset: (props: SidebarPartProps) => JSX.Element

Renders the `<main>` content area beside the {@link Sidebar}.

`SidebarMenu`type

SidebarMenu: (props: SidebarPartProps) => JSX.Element

Renders a `<ul>` list of {@link SidebarMenuItem}s.

`SidebarMenuAction`type

SidebarMenuAction: (props: SidebarButtonProps) => JSX.Element

Renders a secondary action button attached to a {@link SidebarMenuItem}, with an optional tooltip.

`SidebarMenuBadge`type

SidebarMenuBadge: (props: SidebarPartProps) => JSX.Element

Renders a status badge attached to a {@link SidebarMenuItem}.

`SidebarMenuButton`type

SidebarMenuButton: (props: SidebarButtonProps) => JSX.Element

Clickable menu button within a {@link SidebarMenuItem}; supports `active`/`size`/`variant` state and an optional tooltip.

`SidebarMenuItem`type

SidebarMenuItem: (props: SidebarPartProps) => JSX.Element

Renders a single `<li>` entry within a {@link SidebarMenu}.

`SidebarPartProps`type

SidebarPartProps: JSX.IntrinsicElements["div"] & {
  as?: keyof JSX.IntrinsicElements;
  asChild?: boolean;
}

Props shared by the generic {@link Sidebar } structural parts (content, header, footer, group, etc.).

as: as?: keyof JSX.IntrinsicElements | undefined;
asChild: asChild?: boolean | undefined;

`SidebarProps`type

SidebarProps: Omit<BlockElementProps<"aside">, "as" | "width" | "shrink"> & {
  collapsible?: SidebarCollapsible;
  side?: SidebarSide;
  variant?: SidebarVariant;
  width?: BlockElementProps<"aside">["width"];
  shrink?: BlockElementProps<"aside">["shrink"];
}

Props for the {@link Sidebar } component.

collapsible: collapsible?: SidebarCollapsible | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
side: side?: SidebarSide | undefined;
variant: variant?: SidebarVariant | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;

`SidebarRail`type

SidebarRail: (props: SidebarButtonProps) => JSX.Element

Renders a draggable/clickable rail along the sidebar's edge for resizing or toggling it.

`SidebarRailProps`type

SidebarRailProps: SidebarButtonProps

Props for the {@link SidebarRail } component.

active: active?: boolean | undefined;
asChild: asChild?: boolean | undefined;
size: size?: "sm" | "lg" | "default" | undefined;
tooltip: tooltip?: string | undefined;
tooltipSide: tooltipSide?: SidebarTooltipSide | undefined;
variant: variant?: "default" | "outline" | undefined;

`SidebarScope`type

SidebarScope: (props: SidebarPartProps) => JSX.Element

Scoping wrapper that establishes the sidebar's CSS/context boundary.

`SidebarSide`type

SidebarSide: "left" | "right"

Which edge of the viewport a {@link Sidebar } is docked to.

`SidebarTooltipSide`type

SidebarTooltipSide: "top" | "bottom" | "left" | "right"

Side a sidebar button's tooltip is positioned on.

`SidebarTrigger`type

SidebarTrigger: (props: SidebarButtonProps) => JSX.Element

Icon button that toggles the {@link Sidebar}'s open/collapsed state, with an optional tooltip.

`SidebarVariant`type

SidebarVariant: "sidebar" | "floating" | "inset"

Visual style of a {@link Sidebar }.

`Skeleton`type

Skeleton: { (props: SkeletonProps): JSX.Element; (props: SkeletonAsChildProps): JSX.Element; }

Loading placeholder block with configurable `width`/`height`, hidden from assistive tech via `aria-hidden`, rendered as a `<div>` or merged onto a child via `asChild`.

`SkeletonAsChildProps`type

SkeletonAsChildProps: SkeletonOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link Skeleton } rendered with `asChild`, merging its attributes onto a single child element.

asChild: asChild: true;
children: children: JSXElement;
height: height?: string | number | undefined;
ref: ref?: Ref<unknown>;
width: width?: string | number | undefined;

`SkeletonOwnProps`type

SkeletonOwnProps: {
  children?: unknown;
  height?: string | number;
  width?: string | number;
}

Props shared by both {@link Skeleton } call signatures.

children: children?: unknown;
height: height?: string | number | undefined;
width: width?: string | number | undefined;

`SkeletonProps`type

SkeletonProps: Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SkeletonOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}

Props for {@link Skeleton } rendered as its default `<div>` element.

asChild: asChild?: false | undefined;
children: children?: unknown;
height: height?: string | number | undefined;
ref: ref?: Ref<HTMLDivElement>;
width: width?: string | number | undefined;

`Slider`type

Slider: (props: SliderProps) => JSX.Element

Renders the `slider` part of `slider`.

`SliderRange`type

SliderRange: { (props: SliderRangeProps): JSX.Element; (props: SliderRangeAsChildProps): JSX.Element; }

Renders the `slider-range` part of `slider`. Supports polymorphic rendering via `asChild`.

`SliderThumb`type

SliderThumb: { (props: SliderThumbProps): JSX.Element; (props: SliderThumbAsChildProps): JSX.Element; }

Renders the `slider-thumb` part of `slider` with `role="slider"`. Supports polymorphic rendering via `asChild`.

`SliderTrack`type

SliderTrack: { (props: SliderTrackProps): JSX.Element; (props: SliderTrackAsChildProps): JSX.Element; }

Renders the `slider-track` part of `slider`. Supports polymorphic rendering via `asChild`.

`Sonner`type

Sonner: (props: CatalogComponentProps) => JSX.Element

Alias of {@link Toaster} kept for shadcn/sonner API compatibility.

`Spinner`type

Spinner: (props: SpinnerProps) => JSX.Element

Indeterminate loading spinner built on `ProgressCircle`, with an accessible label (defaults to `"Loading"`) and a `size` modifier.

`SpinnerOwnProps`type

SpinnerOwnProps: Omit<ProgressCircleProps, "value" | "getValueLabel"> & {
  label?: string;
  size?: SpinnerSize;
}

Props specific to {@link Spinner }, layered on top of `ProgressCircleProps`.

label: label?: string | undefined;
size: size?: SpinnerSize | undefined;

`SpinnerProps`type

SpinnerProps: SpinnerOwnProps

Props for the {@link Spinner } component.

label: label?: string | undefined;
size: size?: SpinnerSize | undefined;

`SpinnerSize`type

SpinnerSize: "sm" | "md" | "lg"

Size modifier for {@link Spinner }.

`Stack`type

Stack: (props: LegacyLayoutProps) => JSX.Element

`Stat`type

Stat: (props: StatProps) => JSX.Element

Container for a labeled statistic (label, value, description).

`StatDescription`type

StatDescription: (props: StatDescriptionProps) => JSX.Element

Renders supporting description text for a {@link Stat}.

`StatLabel`type

StatLabel: (props: StatLabelProps) => JSX.Element

Renders the label of a {@link Stat}.

`StatValue`type

StatValue: (props: StatValueProps) => JSX.Element

Renders the primary value of a {@link Stat}.

`Switch`type

Switch: { (props: SwitchButtonProps): JSX.Element; (props: SwitchAsChildProps): JSX.Element; }

Renders the `switch` part of `switch` with `role="switch"`. Supports polymorphic rendering via `asChild`.

`Tab`type

Tab: (props: TabProps) => JSX.Element

A router-aware link styled as a tab, auto-marked active by matching the current route (see {@link NavLinkProps.match}).

`Table`type

Table: { (props: TableProps): JSX.Element; (props: TableAsChildProps): JSX.Element; }

Semantic table primitive family. Renders a part of `table`. Supports polymorphic rendering via `asChild`.