Ouro HX

Text

Heading

A section title, <h1> to <h6>, in the theme's foreground color. level sets the tag and a default size; size changes only the look.

Recipes

Ingredients

For the sauce

In Spoonjoy

Spoonjoy, a recipe app, is built with Ouro HX (how).

See it live, no sign-in needed: A recipe · Recipes · Search

In its source: app/components/cookbook/KitchenHome.tsx · app/components/pantry/RecipeGrid.tsx · app/routes/agent.connect.$requestId.tsx

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/heading#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/heading

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/heading#v1.2.13 ourostack/ouro-ui/heading-tests#v1.2.13
import { Heading } from "@/components/ouro/text/heading";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<Heading level={1}>Recipes</Heading>
<Heading level={2} size="lg">Ingredients</Heading>
<Heading level={1} size="display">Dinner, sorted</Heading>

Use instead when

  • Use Text instead for body copy, and for a dialog or sheet title use its title prop, which also labels it for assistive technology.

Props

Type: HeadingProps.

align
Type: "start" | "center" | "end"
Default: inherited
Alignment in writing direction.
children (required)
Type: ReactNode
The heading text.
className
Type: string
Layout only: margins, width, grid placement (mb-2). Appearance classes warn in development; use size and align.
level (required)
Type: 1 | 2 | 3 | 4 | 5 | 6
Outline level: sets the tag (level={2} renders <h2>). Required, because the level is about document structure, not looks; use size to change how big it looks.
ref
Type: Ref<HTMLHeadingElement>
Reaches the rendered element.
size
Type: "sm" | "md" | "lg" | "xl" | "2xl" | "display"
Default: derived from level (1 is 2xl, 2 is xl, 3 is lg, 4 is md, 5 and 6 are sm)
Visual size, independent of the level. display is the hero headline of a landing page, tightly set and larger from the sm breakpoint: <Heading level={1} size="display">.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • as: Not a prop. The tag comes from level: <Heading level={2}>.
  • color: Not a prop. Headings use the theme's foreground color; for colored text use <Text tone="…">.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2).

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: use the align prop.

Source on GitHubThis page as Markdown