Text

This page renders every element the docs MDX pipeline knows about, so you can sanity-check fonts, rhythm, color, and the rendered output of each custom component in one place. It is a living style guide. If a token, slot, or spacing rule changes, the regression shows up here first.

Headings

Headings define the rhythm of a doc. h2 is the major section break; h3 opens a subsection; h4 through h6 are reserved for deeper drill-downs. Top spacing scales with importance using section-* spacing tokens.

Subsection heading (h3)

Use h3 for a named example or a self-contained subtopic inside a section.

Group heading (h4)

h4 is for grouping related items under an h3, like API reference sub-tables.

Detail heading (h5)

h5 is the smallest commonly used heading. Reach for it when a single concept needs a sub-label.

Smallest heading (h6)

h6 is rarely needed; reserve it for short labels inside long reference tables.

Paragraphs and inline content

A standard paragraph uses text-paragraph-sm on text-body. Strong text emphasizes a noun or rule. Italic text is the soft emphasis variant. You can also strike a span when the doc tracks removed behavior, and highlight passages with mark when calling out a critical line in the middle of a paragraph.

Inline code reads as a text-numeric-sm chip on a bg-weakest background, separating identifiers from prose. References to keys use the Kbd component, like ⌘ K to open the command menu, or Esc to close it.

Links come in two flavors. Use the markdown form for in-prose URLs like the Create UI repo, and use the Link component when you need next/link semantics, like the Accordion docs.

Lists

Unordered lists carry primary scanning content.

• The active selection state lives on the item, not the root.
• aria-pressed reflects toggle state when an item is rendered as a button.
• Disabled items skip click handlers and apply the disabled visual treatment.
• Items can opt into asChild to swap the underlying element.

Ordered lists carry sequenced steps.

1. Pick the variant that matches the surface.
2. Decide whether selection is controlled or uncontrolled.
3. Wire onValueChange to your router, state, or URL.
4. Verify keyboard reachability and screen reader output.

Nested lists keep their indent rhythm:

• Top-level item
  • Nested item one
  • Nested item two
• Top-level item

Tables

Tables are the canonical layout for prop reference and keyboard shortcuts.

Blockquotes

Markdown's > syntax renders the filled blockquote with the info-base accent bar.

Good defaults make every doc readable on day one. The goal is not minimalism for its own sake; it is removing every layout decision a writer should not have to make.

Use the JSX form when you need the ghost variant or an attribution:

Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects.

Dieter Rams, Less and More

Horizontal rule

Section breaks inside a long doc use the hr element.

The element above is a horizontal rule. Use it sparingly; an h2 is usually the clearer break.

Images and media

The Figure component wraps next/image in a soft card and supports an optional caption. variant="contained" caps the width at the body column; variant="full" widens it to the article max.

When you only need a freestanding asset, use the Image MDX component directly:

AspectRatio reserves space before content paints, so layout does not jump on slow networks.

Alerts and callouts

Callout is the docs-tuned InlineAlert with six variants. Use info for context, warning for a soft caution, error for breaking changes, success for confirmations, away for deprecated or paused behavior, and the default neutral for general notes.

For richer compositions, reach for a callout:

Tabs

Use Tabs for inline option switchers inside docs.

Accordion

Accordion is the canonical disclosure for FAQs and "see also" content.

LinkCard is a block-level link that pairs a preview image with a title, description, and the destination URL, useful at the bottom of a doc to point to related reading.

Create UI Design System

Compound menu for switching between sections, with vertical or horizontal layouts and an animated active indicator.

createui.co/blog

Component reference primitives

ComponentPreview renders a live example by registry name. It is the standard opening for any component doc.

Code

Inline references use backticks: pnpm v4:dev boots the docs site on port 4000. For full snippets, fenced code blocks render with the language icon, a title, and a copy button.

import { TabMenu, TabMenuItem } from "@/components/ui/tab-menu"
 
export function Example() {
  return (
    <TabMenu defaultValue="overview">
      <TabMenuItem value="overview" label="Overview" />
      <TabMenuItem value="activity" label="Activity" />
    </TabMenu>
  )
}

Shell commands render the same way and pick up the bash icon.

pnpm dlx @create-ui/cli add text-link