Generated API snapshot

@askrjs/themes/components

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

Exports

This entrypoint publishes 503 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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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"

`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. Attached groups without an explicit orientation stack at phone width unless they contain icon buttons; pass orientation="horizontal" to keep the row.

`ButtonGroupOrientation`type

ButtonGroupOrientation: "horizontal" | "vertical"

Layout direction of a {@link ButtonGroup }. When omitted, an attached group is a row that stacks at phone width unless it contains icon buttons. An explicit value keeps that direction unless the caller also passes data-responsive="true", which opts back into phone stacking.

`ButtonGroupProps`type

ButtonGroupProps: DivProps & {
  children?: unknown;
  attached?: boolean;
  orientation?: ButtonGroupOrientation;
  /** Stack at phone width. Defaults to `"true"` for attached groups without an `orientation`. */
  "data-responsive"?: "true" | "false";
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link ButtonGroup } component.

attached: attached?: boolean | undefined;
children: children?: unknown;
data-responsive: Stack at phone width. Defaults to `"true"` for attached groups without an `orientation`.
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<HTMLButtonElement> & { 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<HTMLButtonElement>) => JSX.Element

Button that navigates the calendar to the next month.

`CalendarPreviousButton`type

CalendarPreviousButton: (props: CatalogComponentProps<HTMLButtonElement>) => 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<HTMLButtonElement>) => JSX.Element

Button that navigates the carousel to the next item.

`CarouselPrevious`type

CarouselPrevious: (props: CatalogComponentProps<HTMLButtonElement>) => 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<TElement>;
}

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<TElement>;

`CatThemeName`type

CatThemeName: (typeof CAT_THEME_NAMES)[number]

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

`Center`type

Center: (props: CenterProps) => JSX.Element

Centers content on both axes within the supplied Block dimensions.

`CenterProps`type

CenterProps: WithoutOwnedLayout<BlockProps, "align" | "justify"> & {
  align?: never;
  justify?: never;
}

align: align?: undefined;
asChild: asChild?: unknown;
background: background?: unknown;
border: border?: unknown;
borderBottom: borderBottom?: unknown;
borderRight: borderRight?: unknown;
borderTop: borderTop?: unknown;
center: center?: unknown;
children: children?: unknown;
direction: direction?: unknown;
gap: gap?: unknown;
grow: grow?: unknown;
height: height?: unknown;
hide: hide?: unknown;
justify: justify?: undefined;
margin: margin?: unknown;
marginX: marginX?: unknown;
marginY: marginY?: unknown;
maxHeight: maxHeight?: unknown;
maxWidth: maxWidth?: unknown;
minHeight: minHeight?: unknown;
minWidth: minWidth?: unknown;
padding: padding?: unknown;
paddingX: paddingX?: unknown;
paddingY: paddingY?: unknown;
radius: radius?: unknown;
ref: ref?: unknown;
rowFrom: rowFrom?: unknown;
shadow: shadow?: unknown;
shrink: shrink?: unknown;
sticky: sticky?: unknown;
top: top?: unknown;
width: width?: unknown;
wrap: wrap?: unknown;
zIndex: zIndex?: unknown;

`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;

`Cluster`type

Cluster: (props: ClusterProps) => JSX.Element

Wrapping horizontal content flow for actions, tags, and compact controls.

`ClusterProps`type

ClusterProps: WithoutOwnedLayout<BlockProps, "direction" | "rowFrom" | "wrap"> & {
  direction?: never;
  rowFrom?: never;
  wrap?: never;
}

align: align?: unknown;
asChild: asChild?: unknown;
background: background?: unknown;
border: border?: unknown;
borderBottom: borderBottom?: unknown;
borderRight: borderRight?: unknown;
borderTop: borderTop?: unknown;
center: center?: unknown;
children: children?: unknown;
direction: direction?: undefined;
gap: gap?: unknown;
grow: grow?: unknown;
height: height?: unknown;
hide: hide?: unknown;
justify: justify?: unknown;
margin: margin?: unknown;
marginX: marginX?: unknown;
marginY: marginY?: unknown;
maxHeight: maxHeight?: unknown;
maxWidth: maxWidth?: unknown;
minHeight: minHeight?: unknown;
minWidth: minWidth?: unknown;
padding: padding?: unknown;
paddingX: paddingX?: unknown;
paddingY: paddingY?: unknown;
radius: radius?: unknown;
ref: ref?: unknown;
rowFrom: rowFrom?: undefined;
shadow: shadow?: unknown;
shrink: shrink?: unknown;
sticky: sticky?: unknown;
top: top?: unknown;
width: width?: unknown;
wrap: wrap?: undefined;
zIndex: zIndex?: unknown;

`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<HTMLInputElement>) => 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<HTMLInputElement>) => 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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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<HTMLInputElement>) => 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. One component-owned timer is re-timed when debounceMs changes (or emits at once when the delay drops to zero). A pending value is delivered to the latest onDebouncedInput, is dropped when onDebouncedInput is removed, and is cancelled on unmount.

`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.

`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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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;

`Heading`type

Heading: ({ level, ...props }: HeadingProps) => JSX.Element

Native semantic heading whose visual size is independent from its explicit document level.

`HeadingLevel`type

HeadingLevel: 1 | 2 | 3 | 4 | 5 | 6

`HeadingProps`type

HeadingProps: NativeHeadingProps & {
  level: HeadingLevel;
  size?: HeadingSize;
  tone?: TextTone;
  weight?: TextWeight;
  font?: TextFont;
  numeric?: TextNumeric;
  wrap?: TextWrap;
  truncate?: boolean;
  children?: unknown;
  ref?: Ref<HTMLHeadingElement>;
}

Strongly typed semantic heading props with visual treatment independent from document level.

children: children?: unknown;
font: font?: TextFont | undefined;
level: level: HeadingLevel;
numeric: numeric?: TextNumeric | undefined;
ref: ref?: Ref<HTMLHeadingElement>;
size: size?: HeadingSize | undefined;
tone: tone?: TextTone | undefined;
truncate: truncate?: boolean | undefined;
weight: weight?: TextWeight | undefined;
wrap: wrap?: TextWrap | undefined;

`HeadingSize`type

HeadingSize: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"

`HoverCard`type

HoverCard: (props: HoverCardProps) => import("@askrjs/askr/jsx-runtime").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.

`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.

`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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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<HTMLSelectElement>) => 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<HTMLButtonElement>) => 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) => import("@askrjs/askr/jsx-runtime").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) => import("@askrjs/askr/jsx-runtime").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.

`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?: "default" | "sm" | "lg" | 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?: "default" | "sm" | "lg" | 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.

`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: StackProps) => JSX.Element

Vertical content flow with responsive, token-backed spacing.

`StackProps`type

StackProps: WithoutOwnedLayout<BlockProps, "direction" | "rowFrom" | "gap" | "padding" | "wrap"> & {
  direction?: never;
  gap?: ResponsiveValue<StackSpace>;
  p?: ResponsiveValue<StackSpace>;
  padding?: ResponsiveValue<StackSpace>;
  rowFrom?: never;
  wrap?: ResponsiveValue<StackWrap>;
}

align: align?: unknown;
asChild: asChild?: unknown;
background: background?: unknown;
border: border?: unknown;
borderBottom: borderBottom?: unknown;
borderRight: borderRight?: unknown;
borderTop: borderTop?: unknown;
center: center?: unknown;
children: children?: unknown;
direction: direction?: undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: unknown;
height: height?: unknown;
hide: hide?: unknown;
justify: justify?: unknown;
margin: margin?: unknown;
marginX: marginX?: unknown;
marginY: marginY?: unknown;
maxHeight: maxHeight?: unknown;
maxWidth: maxWidth?: unknown;
minHeight: minHeight?: unknown;
minWidth: minWidth?: unknown;
p: p?: ResponsiveValue<BlockSpace> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: unknown;
paddingY: paddingY?: unknown;
radius: radius?: unknown;
ref: ref?: unknown;
rowFrom: rowFrom?: undefined;
shadow: shadow?: unknown;
shrink: shrink?: unknown;
sticky: sticky?: unknown;
top: top?: unknown;
width: width?: unknown;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: unknown;

`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.