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

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

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

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

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

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

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

`LegacyLayoutProps`

Import from @askrjs/themes/components.

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

`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?: "sm" \| "lg" \| "default" \| 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?: "sm" \| "lg" \| "default" \| undefined;`	`—`	—
`tooltip`	`tooltip?: string \| undefined;`	`—`	—
`tooltipSide`	`tooltipSide?: SidebarTooltipSide \| undefined;`	`—`	—
`variant`	`variant?: "default" \| "outline" \| 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;`	`—`	—

`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;`	`—`	—
`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;`	`—`	—
`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 Sonner for time-boxed feedback instead of a persistent inline Alert.