Layout and typography

Choose a component · Style with StyleX · Enforce usage with lint

Choose a primitive

Need a wrapper? Start with Box. Use Stack for vertical groups, HStack for horizontal groups, Flex for custom alignment, and Grid for columns. Container constrains and centers page content. Use Link, Text, and Heading for meaningful text elements instead of styling a generic Box. Select a component below to see a live preview and copy its source.

• Box: Div by default; as selects a semantic element with tag-specific events and refs. Applies default box sizing and minimum inline size.
• Flex: Flex layout; customize direction and alignment with xstyle.
• Stack: Column flex layout with four spacing units between children.
• HStack: Row flex layout with centered cross-axis alignment and four spacing units between children.
• VStack: Column flex layout with four spacing units between children.
• Grid: Grid layout; set columns and rows with xstyle.
• Center: Flex layout centered on both axes.
• Container: Fluid page wrapper centered up to 90rem; use fluid for full width or xstyle to override maximum width and padding.
• Absolute Center: Center content within a positioned parent.
• Bleed: Extend content into a parent's inline padding.
• Float: Position content over a parent's corner.
• Wrap: Lay out items in wrapping rows.
• Link: Native anchor with href, target, rel, download, ref, and native keyboard behavior.
• Text: Native paragraph without forced visual defaults.
• Blockquote: Long-form quotation.
• Em: Emphasized text.
• Highlight: Highlight matching words.
• Mark: Marked text.
• Prose: Readable long-form content.
• Codeblock: Preformatted code with horizontal overflow.
• Heading: h2 by default; as selects h1 through h6 independently of visual size.

Native semantics

Box defaults to div. Its as prop selects the native tag and its event/ref types. Input size, image width and height, and meta content remain native attributes. Use xstyle for styling. Heading restricts as to heading tags. Link performs native navigation by default. Pass a TanStack Router or Next.js Link through render to preserve framework navigation.

Semantic components

import { Box } from "@/components/ui/box"
import { Heading } from "@/components/ui/heading"
import { Link } from "@/components/ui/link"
import { Text } from "@/components/ui/text"
import * as stylex from "@stylexjs/stylex"

const styles = stylex.create({ article: { padding: "1rem" } })

export function Article() {
  return (
    <Box as="article" xstyle={styles.article}>
      <Heading as="h2">Getting started</Heading>
      <Text>Copy the components into your application.</Text>
      <Link href="/docs/installation">Installation guide</Link>
    </Box>
  )
}

Next: style these components with StyleX.