# @askrjs/themes/block

> Published API exports for @askrjs/themes/block.

Source: [https://askrjs.com/docs/reference/api/themes/block](https://askrjs.com/docs/reference/api/themes/block)

Status: stable. Packages: @askrjs/themes/block.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 21 exports from the declarations shipped by @askrjs/themes.

### `Block`

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

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

### `BlockAlign`

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

### `BlockAsChildProps`

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

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

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `asChild`: asChild: true;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children: JSXElement;

- `className`: className?: string | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `ref`: ref?: Ref<unknown>;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

- `sticky`: sticky?: boolean | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockBackground`

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

### `BlockDirection`

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

### `BlockDivProps`

```ts
BlockDivProps: BlockElementProps<"div">
```

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

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: "div" | undefined;

- `asChild`: asChild?: false | undefined;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `className`: className?: string | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `ref`: ref?: Ref<unknown>;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

- `sticky`: sticky?: boolean | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockElement`

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

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

### `BlockElementProps`

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

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

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: TElement | undefined;

- `asChild`: asChild?: false | undefined;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `ref`: ref?: Ref<unknown>;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

- `sticky`: sticky?: boolean | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockJustify`

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

### `BlockMargin`

```ts
BlockMargin: BlockSpace | "auto"
```

### `BlockNativeProps`

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

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

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: "a" | "article" | "aside" | "div" | "form" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul" | undefined;

- `asChild`: asChild?: false | undefined;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `className`: className?: string | ((() => IntrinsicClassValue) & string) | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `ref`: ref?: Ref<unknown>;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

- `sticky`: sticky?: boolean | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockOwnProps`

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

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

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: BlockElement | undefined;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `className`: className?: string | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

- `sticky`: sticky?: boolean | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockProps`

```ts
BlockProps: BlockNativeProps | BlockAsChildProps
```

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

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `asChild`: asChild?: boolean | undefined;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `className`: className?: string | ((() => IntrinsicClassValue) & string) | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `ref`: ref?: Ref<unknown>;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

- `sticky`: sticky?: boolean | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockRadius`

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

### `BlockResponsiveValue`

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

### `BlockRowFrom`

```ts
BlockRowFrom: Exclude<LayoutBreakpoint, "base">
```

### `BlockShadow`

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

### `BlockSize`

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

### `BlockSpace`

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

### `BlockSpanProps`

```ts
BlockSpanProps: BlockElementProps<"span">
```

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

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: "span" | undefined;

- `asChild`: asChild?: false | undefined;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `className`: className?: string | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `ref`: ref?: Ref<unknown>;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

- `sticky`: sticky?: boolean | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockZIndex`

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

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/badge/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/breadcrumb/index.md)