@thebase/ui/docs/blocks.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Blocks

BaseUI blocks are static HTML compositions styled by the same shadcn-aligned tokens as the component library. They are based on the public shadcn/ui blocks page and keep the same sizing landmarks: `min-height: 100svh`, sidebar widths, header heights, `gap-4`/`gap-6`, muted backgrounds, and auth-card widths.

Each block has its own source stylesheet in `examples/blocks/<block-name>.css`. Shared helpers live in `examples/blocks/shared.css`; new blocks should not be folded into an all-in-one block stylesheet.

Block navigation icons must use BaseUI's built-in Lucide icon component, for example `<span b-icon="layout-dashboard" b-block-icon></span>`. Do not use placeholder letters inside `b-block-icon`.

Blocks are not standalone runtime components. Paste the markup and load the normal BaseUI assets:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
```

`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@0.0.4`) instead of `@latest` for production. Blocks are static markup, so they only need the static `b-ui` runtime above — see [Usage Guide](usage-guide.md) if the surrounding page is itself an Owl app and you'd rather compose the equivalent layout from [Pure Owl Components](owl-components.md).

Use `b-block` to select the block style:

```html
<section b-block="login-03">
  <div b-block-login>
    <a href="#" b-block-brand>Acme Inc.</a>
    <div b-block-auth-card>...</div>
  </div>
</section>
```

The docs/dev server serves the block gallery at `/blocks` through the shared `examples/index.html` shell. Individual block viewers still live at `examples/blocks/<block-name>.html` and are also available through clean `/blocks/<block-name>` aliases. Use `?embed=1` for iframe previews without the surrounding viewer chrome.

## Included Blocks

- `chart-01`: copyable usage block showing how to compose `b-ui="chart"` with chart slots, SVG primitives, tokens, and footer copy.
- `dashboard-01`: dashboard shell with inset sidebar, header, metric cards, chart surface, and table area.
- `sidebar-01` through `sidebar-16`: static conversions of the current shadcn/ui sidebar block family, including documentation sidebars, collapsible groups, inset navigation, mail, workspace, file explorer, calendar, dialog, right TOC, dual-sidebar, and sticky-header variants.
- `login-03`: centered login card on muted background with a 24rem max-width form stack.
- `login-04`: login card with form and media panel, capped at 56rem like the shadcn block preview.
- `signup-03`: centered signup card kept separate from login while sharing the same 24rem/auth-card sizing.
- `signup-04`: signup card and media split kept separate from login while sharing the same 56rem split-card sizing.

See `/blocks` for the gallery, or open `examples/blocks/<block-name>.html` for the shadcn-style viewer with Preview/Code modes and desktop, tablet, and mobile viewport controls. Add `?embed=1` to a block URL for a clean preview-only render inside an iframe.