Swirski UI

Typography

Heading and body text primitives with semantic controls, reusable scales and Swirski tone presets.

Component

12

Import

import { Text, Title } from "@swirski/ui";

Playground

This component does not have editable controls yet.

Usage

<Title order={1} size="display">Build expressive interfaces.</Title>
<Text size="xl" tone="muted" weight="bold">
  A small UI library for expressive, editorial web interfaces.
</Text>

Props

15 generated

Prop	Type	Default	Notes
`Text.as`	`ElementType`	`-`	Custom text element or component.
`Text.asChild`	`boolean`	`false`	Renders the child as the root element.
`Text.children`	`ReactNode`	`-`	Text content.
`Text.component`	`'div' \| 'p' \| 'span'`	`"p"`	Chooses the rendered text element.
`Text.size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'xs' \| '2xl'`	`"md"`	Applies the standard text scale.
`Text.tone`	`'default' \| 'muted' \| 'inverted' \| 'subtle'`	`"default"`	Applies the standard text color treatment.
`Text.variant`	`'default' \| 'caption' \| 'lead'`	`"default"`	Applies the standard text role treatment.
`Text.weight`	`'black' \| 'regular' \| 'medium' \| 'bold'`	`"regular"`	Applies the text weight.
`Title.as`	`ElementType`	`-`	Custom heading element or component.
`Title.asChild`	`boolean`	`false`	Renders the child as the root element.
`Title.children`	`ReactNode`	`-`	Heading content.
`Title.order`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	Chooses the semantic heading element.
`Title.size`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'display'`	`-`	Overrides the visual heading scale.
`Title.tone`	`'default' \| 'muted' \| 'inverted'`	`"default"`	Applies the standard title color treatment.
`Title.variant`	`'default' \| 'plain'`	`"default"`	Generated from TitleProps.

Previous: SectionLabel Next: SwirskiProvider