Consistent text styling with semantic variants, gradient effects, and highlights.
Preview
Heading 1
Heading 2
Heading 3
Heading 4
This is a paragraph with default styling. It has proper line height for readability.
This is a lead paragraph, typically used for introductions.
This is muted text for secondary information.
Installation
Usage
import { Typography } from "@/components/ui/typography"
export function MyComponent() {
return (
<div>
<Typography variant="h1">Heading</Typography>
<Typography variant="p">Paragraph text</Typography>
<Typography variant="muted">Secondary text</Typography>
</div>
)
}Examples
Gradient Text
Build with GooseUI
Gradient text effect
<Typography variant="h1">
Build with <Typography variant="gradient" as="span">GooseUI</Typography>
</Typography>Highlighted Text
This text has a highlighted word.
You can highlight important information in your content.
<Typography variant="p">
This text has a <Typography variant="highlight" as="span">highlighted</Typography> word.
</Typography>Inline Code
Use npm install gooseui to install.
The Typography component supports multiple variants.
<Typography variant="p">
Use <Typography variant="code" as="code">npm install gooseui</Typography> to install.
</Typography>Blockquote
"Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs
<Typography variant="blockquote">
"Design is not just what it looks like..."
</Typography>Custom Element (as prop)
This looks like H1 but renders as a paragraph
This looks like a paragraph but renders as a span// Renders as <p> but looks like <h1>
<Typography variant="h1" as="p">
This looks like H1 but renders as a paragraph
</Typography>Paragraph Margins (affects prop)
With margin (default)
First paragraph with top margin.
Second paragraph with top margin.
Without margin
First paragraph without margin.
Second paragraph without margin.
<Typography variant="p" affects="withPMargin">With margin</Typography>
<Typography variant="p" affects="removePMargin">Without margin</Typography>Variants
| Variant | Element | Description |
|---|---|---|
| h1 | <h1> | Main heading, largest size |
| h2 | <h2> | Section heading |
| h3 | <h3> | Subsection heading |
| h4 | <h4> | Small heading |
| p | <p> | Default paragraph |
| lead | <p> | Larger intro text |
| large | <p> | Large semibold text |
| small | <p> | Small text |
| muted | <p> | Secondary/muted text |
| blockquote | <blockquote> | Quote with left border |
| code | <code> | Inline code snippet |
| gradient | <span> | Gradient colored text |
| highlight | <span> | Highlighted text with background |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small" | "muted" | "blockquote" | "code" | "gradient" | "highlight" | "p" | Typography style variant |
| as | "h1" | "h2" | "h3" | "h4" | "p" | "span" | "blockquote" | "code" | auto | Override rendered HTML element |
| affects | "default" | "removePMargin" | "withPMargin" | "default" | Margin behavior for paragraphs |
| className | string | - | Additional CSS classes |
| children | React.ReactNode | - | Content to render |