Block
Markdown for agentsSemantic container (div by default, swappable element) — the structural counterpart to Text (p).
npx slipstream-ui@latest add blockSemantic elements
as="section"
A titled region — screen readers can jump between sections.
as="article"
Self-composition content.
as="figure"
Illustrative content.
Inline + utilities
Block with utilities — the layout-friendly default div.
Inline blocks stay in flow: as="span" inside a paragraph line.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | 'div' | 'span' | 'section' | 'article' | 'figure' | 'header' | 'footer' | 'nav' | 'main' | 'aside' | 'div' | Semantic element to render. |
| inline | boolean | false | Shorthand for as="span" — inline flow. |
| muted | boolean | false | Use the muted-foreground token for the block's text. |
Accessibility
- Element choice is explicit — pick the element matching the content role (section/article/figure).
- Block adds no interactive behavior; children keep their own keyboard/ARIA contracts.
- Copy belongs in Text (p), not Block — document semantics stay queryable.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.