Askr documentation

UI & Components

Alert, Badge, Empty, Skeleton, Spinner, and Stat

Alert, Badge, Empty, Skeleton, Spinner, and Stat: anatomy, keyboard behavior, state, and theming in Askr.

Example

import { Alert, AlertDescription, AlertTitle, Badge, Empty, EmptyDescription, EmptyTitle, Spinner } from '@askrjs/themes/components';

{query.pending ? <Spinner aria-label="Loading projects" /> :
 query.error ? <Alert variant="danger"><AlertTitle>Could not load projects</AlertTitle><AlertDescription>{query.error.message}</AlertDescription></Alert> :
 query.data.length === 0 ? <Empty><EmptyTitle>No projects</EmptyTitle><EmptyDescription>Create a project to get started.</EmptyDescription></Empty> :
 <Badge>{query.data.length} active</Badge>}

Published props

Generated from the TypeScript declarations shipped by the installed package. Named types in the Type column define the accepted values.

`AlertProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`BadgeAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—
`variant`	`variant?: BadgeVariant \| undefined;`	`—`	—

`BadgeOwnProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`variant`	`variant?: BadgeVariant \| undefined;`	`—`	—

`BadgeProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLSpanElement>;`	`—`	—
`variant`	`variant?: BadgeVariant \| undefined;`	`—`	—

`SkeletonAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`height`	`height?: string \| number \| undefined;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—
`width`	`width?: string \| number \| undefined;`	`—`	—

`SkeletonOwnProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`height`	`height?: string \| number \| undefined;`	`—`	—
`width`	`width?: string \| number \| undefined;`	`—`	—

`SkeletonProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`height`	`height?: string \| number \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—
`width`	`width?: string \| number \| undefined;`	`—`	—

`SpinnerOwnProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`label`	`label?: string \| undefined;`	`—`	—
`size`	`size?: SpinnerSize \| undefined;`	`—`	—

`SpinnerProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`label`	`label?: string \| undefined;`	`—`	—
`size`	`size?: SpinnerSize \| undefined;`	`—`	—

`AspectRatioAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`ratio`	`ratio?: string \| number \| undefined;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—
`style`	`style?: unknown;`	`—`	—

`AspectRatioProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`ratio`	`ratio?: string \| number \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—
`style`	`style?: unknown;`	`—`	—

`BlockAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`BlockDivProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`BlockElementProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`BlockNativeProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`BlockSpanProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`ButtonAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`ButtonGroupProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`attached`	`attached?: boolean \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`data-responsive`	`data-responsive?: "true" \| "false" \| undefined;`	`—`	Stack at phone width. Defaults to `"true"` for attached groups without an `orientation`.
`orientation`	`orientation?: ButtonGroupOrientation \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`ButtonNativeProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`CardActionProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`CardContentProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`CardDescriptionProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLParagraphElement>;`	`—`	—

`CardFooterProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`CardHeaderProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`CardProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—
`variant`	`variant?: CardVariant \| undefined;`	`—`	—

`CardTitleProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLHeadingElement>;`	`—`	—
`titleAs`	`titleAs?: CardTitleHeadingTag \| undefined;`	`—`	Choose the level that follows the surrounding document hierarchy.

`CatalogComponentProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`as`	`as?: keyof JSX.IntrinsicElements \| undefined;`	`—`	—
`asChild`	`asChild?: boolean \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`class`	`class?: string \| undefined;`	`—`	—
`ref`	`ref?: Ref<TElement>;`	`—`	—

`CenterProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`CloseNativeProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`label`	`label?: string \| undefined;`	`—`	—

`CloseOwnProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`label`	`label?: string \| undefined;`	`—`	—

`ClusterProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`CommandPaletteContentProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`CommandPaletteLinkProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`closeOnSelect`	`closeOnSelect?: boolean \| undefined;`	`—`	—
`onBeforeNavigate`	`onBeforeNavigate?: ((event: Event) => void) \| undefined;`	`—`	—

`CommandPaletteListProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLUListElement>;`	`—`	—

`ContainerProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`align`	`align?: ResponsiveValue<BlockAlign> \| undefined;`	`—`	—
`as`	`as?: "div" \| 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;`	`—`	—
`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;`	`—`	—
`size`	`size?: BlockSize \| 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;`	`—`	—

`CopyButtonProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`failureMessage`	`failureMessage?: string \| undefined;`	`—`	—
`label`	`label: string;`	`—`	—
`resetAfter`	`resetAfter?: number \| undefined;`	`—`	—
`successMessage`	`successMessage?: string \| undefined;`	`—`	—
`text`	`text: string;`	`—`	—

`DialogProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`EmptyStateProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`FieldErrorProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLParagraphElement>;`	`—`	—

`FieldHintProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLParagraphElement>;`	`—`	—

`FieldProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`invalid`	`invalid?: boolean \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`FooterContentProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`FooterDescriptionProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLParagraphElement>;`	`—`	—

`FooterLinkProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLAnchorElement>;`	`—`	—

`FooterLinksProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—

`FooterSectionProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`FooterTitleProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLHeadingElement>;`	`—`	—

`GridProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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>;`	`—`	—

`HeaderProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`position`	`position?: "sticky" \| "static" \| undefined;`	`—`	—
`sticky`	`sticky?: boolean \| undefined;`	`—`	—

`HeadingProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`InputGroupProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`attached`	`attached?: boolean \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`orientation`	`orientation?: InputGroupOrientation \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`InputGroupTextAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—

`InputGroupTextProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLSpanElement>;`	`—`	—

`MetaStripProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`density`	`density?: MetaStripDensity \| undefined;`	`—`	—
`items`	`items: readonly MetaStripItem[];`	`—`	—
`ref`	`ref?: Ref<HTMLDListElement>;`	`—`	—

`NavbarProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`breakpoint`	`breakpoint?: false \| NavbarCollapseBreakpoint \| undefined;`	`—`	—
`collapseAt`	`collapseAt?: false \| NavbarCollapseBreakpoint \| undefined;`	`—`	—
`collapseIcon`	`collapseIcon?: unknown;`	`—`	—
`collapseLabel`	`collapseLabel?: string \| undefined;`	`—`	—

`NavBrandProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`NavDropdownProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`label`	`label: unknown;`	`—`	—

`NavGroupProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`label`	`label?: unknown;`	`—`	—
`title`	`title?: unknown;`	`—`	—

`NavItemAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`active`	`active?: boolean \| undefined;`	`—`	—
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—

`NavItemProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`active`	`active?: boolean \| undefined;`	`—`	—
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLAnchorElement>;`	`—`	—

`NavLinkProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`active`	`active?: boolean \| undefined;`	`—`	—
`match`	`match?: NavLinkMatch \| undefined;`	`—`	—

`PageHeaderProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`actions`	`actions?: unknown;`	`—`	—
`description`	`description?: unknown;`	`—`	—
`direction`	`direction?: undefined;`	`—`	—
`rowFrom`	`rowFrom?: undefined;`	`—`	—
`title`	`title: unknown;`	`—`	—

`PillProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`active`	`active?: boolean \| undefined;`	`—`	—
`match`	`match?: NavLinkMatch \| undefined;`	`—`	—

`PillsAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—

`PillsProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—

`SeparatorAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`decorative`	`decorative?: boolean \| undefined;`	`—`	—
`orientation`	`orientation?: "vertical" \| "horizontal" \| undefined;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—

`SeparatorNativeProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`decorative`	`decorative?: boolean \| undefined;`	`—`	—
`orientation`	`orientation?: "vertical" \| "horizontal" \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLDivElement>;`	`—`	—

`SeparatorOwnProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`decorative`	`decorative?: boolean \| undefined;`	`—`	—
`orientation`	`orientation?: "vertical" \| "horizontal" \| undefined;`	`—`	—

`SeparatorProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`SidebarButtonProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`SidebarPartProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`as`	`as?: keyof JSX.IntrinsicElements \| undefined;`	`—`	—
`asChild`	`asChild?: boolean \| undefined;`	`—`	—

`SidebarProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`collapsible`	`collapsible?: SidebarCollapsible \| undefined;`	`—`	—
`shrink`	`shrink?: ResponsiveValue<number \| boolean> \| undefined;`	`—`	—
`side`	`side?: SidebarSide \| undefined;`	`—`	—
`variant`	`variant?: SidebarVariant \| undefined;`	`—`	—
`width`	`width?: ResponsiveValue<BlockSize> \| undefined;`	`—`	—

`SidebarRailProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`StackProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`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;`	`—`	—

`TabProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`active`	`active?: boolean \| undefined;`	`—`	—
`match`	`match?: NavLinkMatch \| undefined;`	`—`	—

`TabsAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`ref`	`ref?: Ref<unknown>;`	`—`	—

`TabsProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`asChild`	`asChild?: false \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—

`TextProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`as`	`as?: TextElement \| undefined;`	`—`	—
`children`	`children?: unknown;`	`—`	—
`font`	`font?: TextFont \| undefined;`	`—`	—
`numeric`	`numeric?: TextNumeric \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—
`size`	`size?: TextSize \| undefined;`	`—`	—
`tone`	`tone?: TextTone \| undefined;`	`—`	—
`truncate`	`truncate?: boolean \| undefined;`	`—`	—
`weight`	`weight?: TextWeight \| undefined;`	`—`	—
`wrap`	`wrap?: TextWrap \| undefined;`	`—`	—

`ThemePickerProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`label`	`label?: string \| undefined;`	`—`	—
`themes`	`themes?: readonly ThemeOption[] \| undefined;`	`—`	—

`ThemeScopeProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`defaultTheme`	`defaultTheme?: ThemeName \| undefined;`	`—`	—
`storageKey`	`storageKey?: string \| undefined;`	`—`	—
`themes`	`themes?: readonly ThemeOption[] \| undefined;`	`—`	—

`ThemeToggleProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`children`	`children?: unknown;`	`—`	—
`darkIcon`	`darkIcon?: unknown;`	`—`	—
`lightIcon`	`lightIcon?: unknown;`	`—`	—
`onPress`	`onPress?: ((event: PressEvent) => void) \| undefined;`	`—`	—
`systemIcon`	`systemIcon?: unknown;`	`—`	—
`themes`	`themes?: readonly ThemeName[] \| undefined;`	`—`	—

`ToolbarProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`actions`	`actions?: unknown;`	`—`	—
`direction`	`direction?: undefined;`	`—`	—
`rowFrom`	`rowFrom?: undefined;`	`—`	—
`title`	`title: unknown;`	`—`	—

`VirtualListAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`apiRef`	`apiRef?: Ref<VirtualListApi<Item> \| null>;`	`—`	—
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`followBottom`	`followBottom?: boolean \| { threshold?: number; } \| undefined;`	`—`	—
`getKey`	`getKey: (item: Item, index: number) => string \| number;`	`—`	—
`getRowHeight`	`getRowHeight?: ((item: Item, index: number) => number) \| undefined;`	`—`	Optional keyed row sizing. When omitted, VirtualList retains its fixed-height arithmetic path.
`items`	`items: readonly Item[];`	`—`	—
`onScroll`	`onScroll?: ((event: Event) => void) \| undefined;`	`—`	—
`overscan`	`overscan?: VirtualOverscan \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—
`rowComponent`	`rowComponent: VirtualListRowComponent<Item>;`	`—`	—
`rowHeight`	`rowHeight: number;`	`—`	—
`viewport`	`viewport?: "lg" \| undefined;`	`—`	—

`VirtualListProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`apiRef`	`apiRef?: Ref<VirtualListApi<Item> \| null>;`	`—`	—
`asChild`	`asChild?: false \| undefined;`	`—`	—
`followBottom`	`followBottom?: boolean \| { threshold?: number; } \| undefined;`	`—`	—
`getKey`	`getKey: (item: Item, index: number) => string \| number;`	`—`	—
`getRowHeight`	`getRowHeight?: ((item: Item, index: number) => number) \| undefined;`	`—`	Optional keyed row sizing. When omitted, VirtualList retains its fixed-height arithmetic path.
`items`	`items: readonly Item[];`	`—`	—
`onScroll`	`onScroll?: ((event: Event) => void) \| undefined;`	`—`	—
`overscan`	`overscan?: VirtualOverscan \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—
`rowComponent`	`rowComponent: VirtualListRowComponent<Item>;`	`—`	—
`rowHeight`	`rowHeight: number;`	`—`	—
`viewport`	`viewport?: "lg" \| undefined;`	`—`	—

`VirtualListRowComponentProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`index`	`index: number;`	`—`	—
`isVisible`	`isVisible: boolean;`	`—`	—
`item`	`item: Item;`	`—`	—
`rowKey`	`rowKey: string;`	`—`	—

`VirtualTableAsChildProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`apiRef`	`apiRef?: Ref<VirtualTableApi<Row> \| null>;`	`—`	—
`asChild`	`asChild: true;`	`—`	—
`children`	`children: JSXElement;`	`—`	—
`columns`	`columns: readonly VirtualTableColumn<Row>[];`	`—`	—
`defaultSelectedRowKey`	`defaultSelectedRowKey?: string \| null \| undefined;`	`—`	—
`getKey`	`getKey: (row: Row, index: number) => string \| number;`	`—`	—
`headerHeight`	`headerHeight: number;`	`—`	—
`onRowClick`	`onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) \| undefined;`	`—`	—
`onScroll`	`onScroll?: ((event: Event) => void) \| undefined;`	`—`	—
`onSelectedRowKeyChange`	`onSelectedRowKeyChange?: ((next: string \| null) => void) \| undefined;`	`—`	—
`overscan`	`overscan?: VirtualOverscan \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—
`rowHeight`	`rowHeight: number;`	`—`	—
`rows`	`rows: readonly Row[];`	`—`	—
`selectedRowKey`	`selectedRowKey?: string \| null \| undefined;`	`—`	—
`tableWidth`	`tableWidth?: "compact" \| undefined;`	`—`	—
`viewport`	`viewport?: "lg" \| undefined;`	`—`	—

`VirtualTableCellComponentProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`column`	`column: VirtualTableColumn<Row>;`	`—`	—
`row`	`row: Row;`	`—`	—
`rowIndex`	`rowIndex: number;`	`—`	—
`rowKey`	`rowKey: string;`	`—`	—
`selected`	`selected: boolean;`	`—`	—

`VirtualTableProps`

Import from @askrjs/themes/components.

Prop	Type	Default	Description
`apiRef`	`apiRef?: Ref<VirtualTableApi<Row> \| null>;`	`—`	—
`asChild`	`asChild?: false \| undefined;`	`—`	—
`columns`	`columns: readonly VirtualTableColumn<Row>[];`	`—`	—
`defaultSelectedRowKey`	`defaultSelectedRowKey?: string \| null \| undefined;`	`—`	—
`getKey`	`getKey: (row: Row, index: number) => string \| number;`	`—`	—
`headerHeight`	`headerHeight: number;`	`—`	—
`onRowClick`	`onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) \| undefined;`	`—`	—
`onScroll`	`onScroll?: ((event: Event) => void) \| undefined;`	`—`	—
`onSelectedRowKeyChange`	`onSelectedRowKeyChange?: ((next: string \| null) => void) \| undefined;`	`—`	—
`overscan`	`overscan?: VirtualOverscan \| undefined;`	`—`	—
`ref`	`ref?: Ref<HTMLElement>;`	`—`	—
`rowHeight`	`rowHeight: number;`	`—`	—
`rows`	`rows: readonly Row[];`	`—`	—
`selectedRowKey`	`selectedRowKey?: string \| null \| undefined;`	`—`	—
`tableWidth`	`tableWidth?: "compact" \| undefined;`	`—`	—
`viewport`	`viewport?: "lg" \| undefined;`	`—`	—

Purpose

None of Alert, Badge, Empty, Skeleton, Spinner, or Stat ships a headless counterpart in @askrjs/ui — each lives only in the themes package, since their behavior amounts to static markup and styling rather than anything complex enough to justify a separate logic layer. Stat is the odd one out in a different way: it has no dedicated @askrjs/themes/stat subpath, so you reach it through the shared @askrjs/themes/components barrel instead of importing it on its own.

Install and import

Alert, Badge, Empty, Skeleton, and Spinner each have their own themes subpath — @askrjs/themes/alert, @askrjs/themes/badge, @askrjs/themes/empty, @askrjs/themes/skeleton, @askrjs/themes/spinner. Stat has no subpath of its own: import Stat, StatLabel, StatValue, and StatDescription from the full @askrjs/themes/components barrel instead — or pull all six components from that same barrel if you'd rather have one import for the whole group.

Live examples

The example branches across the states these components exist to cover — pending, failed, empty, and loaded — so you can see which one belongs in each branch rather than reaching for whichever is nearest. Stat comes from the @askrjs/themes/components barrel rather than its own subpath, and is otherwise a normal Stat / StatLabel / StatValue composition.

Anatomy

Alert is a single component with icon, title, description, and actions slots plus a titleAs heading tag; Badge and Skeleton are similarly flat, single components with no compound parts. This group actually ships two different empty-state components, not one — don't conflate them: Empty is the compound one, with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent slotting into an Empty wrapper (closer in shape to Card than to Alert or Badge), while EmptyState is a separate, single all-in-one component (icon/title/titleAs/description/action props, no compound parts of its own) for the common case where you don't need to hand-assemble the pieces. Spinner has no compound structure either; it's a themed wrapper around ProgressCircle's indeterminate presentation. Stat is compound too: a Stat wrapper composes with StatLabel, StatValue, and StatDescription children.

State model

None of these six own any state — every one of them is presentational, driven entirely by the props you pass on each render, and that includes Stat. Alert accepts an onDismiss callback for a caller-owned dismiss button, but the decision to mount or unmount the alert is still yours; Alert doesn't track its own visibility internally.

Keyboard and accessibility

Alert accepts a dismissLabel for the accessible name of its optional dismiss control, since that's the only interactive part across this group. Badge, Skeleton, Empty, Stat, and Spinner are non-interactive and have no keyboard behavior to test; because Spinner is effectively ProgressCircle's indeterminate look, give it a label so assistive tech gets something better than silence while it spins.

Styling and tokens

Alert and Badge both take a variant prop that maps to theme tokens instead of requiring custom color CSS — Alert's set is 'default' | 'info' | 'success' | 'warning' | 'danger', Badge's is a bit wider with 'secondary' and 'outline' added. Skeleton takes explicit width/height so its placeholder shape matches the real content it's standing in for, and Spinner takes a size of 'sm' | 'md' | 'lg'.

API

Badge supports asChild to render as something other than a span, and Skeleton supports the same pattern for its wrapping div. Alert's props are title, description, icon, actions, titleAs, dismissLabel, onDismiss, and variant. EmptyState (the single all-in-one component, not the compound Empty/EmptyHeader/EmptyMedia/EmptyTitle/EmptyDescription/EmptyContent family) takes icon, title, titleAs, description, and action.

Edge cases

Stat has no dedicated subpath, so a @askrjs/themes/stat import will fail — reach for @askrjs/themes/components instead, which is easy to miss if you're used to every other component here having its own subpath. Skeleton has no built-in timeout, so pair it with the real loading/error state next to it instead of letting it sit on screen indefinitely if a request stalls.

See Progress for a determinate alternative to Spinner's indeterminate look, and Toast and Toaster for time-boxed feedback instead of a persistent inline Alert.