- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
A foundational typography component that provides comprehensive text styling control. Supports semantic HTML rendering, preset variants based on shadcn/ui patterns, and extensive customization options for size, weight, alignment, color, and text transformations.
Basic Usage
The simplest usage with default paragraph styling. The component renders a <p> element by default.
This is a standard paragraph with proper line height and spacing. The Text component handles all typography needs with a clean, consistent API.
Heading Variants
Preset heading styles inspired by shadcn/ui. By default, heading variants render the corresponding semantic HTML element (h1, h2, h3, h4).
Heading 1 - Extra Bold Large
Heading 2 - With Bottom Border
Heading 3 - Semibold Medium
Heading 4 - Semibold Small
Text Variants
Additional preset variants for common text styling patterns.
Lead text - Larger body text in muted color for introductions
Large text - Emphasized text with semibold weight
Paragraph - Standard body text with optimal line height
Small text - Compact text for labels and secondary info
Muted text - Deemphasized content in subdued color
npm install @pex/ui-webSize Control
Override the default size of any variant with the size prop. Useful when you want heading-style formatting at a different size.
Extra Small (xs) - 12px
Small (sm) - 14px
Base (base) - 16px
Large (lg) - 18px
Extra Large (xl) - 20px
2X Large (2xl) - 24px
3X Large (3xl) - 30px
4X Large (4xl) - 36px
Weight Variants
Control font weight for emphasis and hierarchy.
Light (300)
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
Extra Bold (800)
Alignment
Control text alignment with the align prop.
Left aligned text - Default alignment for most content
Center aligned text - Great for headings and callouts
Right aligned text - Useful for metadata and timestamps
Justified text - Distributes text evenly across the line width. Best for longer paragraphs where a clean edge is desired on both sides.
Color Variants
Semantic color options that work with your theme. All colors maintain proper contrast ratios and support dark mode.
Default - Standard foreground color
Muted - Subdued for secondary content
Primary - Brand color emphasis
Destructive - Errors and warnings
Success - Positive states and confirmations
Warning - Caution and important notices
Text Transform
Control text capitalization with the transform prop.
No transformation applied
Uppercase transformation
LOWERCASE TRANSFORMATION
capitalize each word
Truncation
Control text overflow with single-line truncation or multi-line clamping.
Single Line Truncation
This is a very long piece of text that will be truncated with an ellipsis when it exceeds the width of its container. Perfect for card titles and list items with limited space.
Multi-Line Clamping
2 Line Clamp
This paragraph will be clamped to exactly 2 lines. Any content that extends beyond the second line will be hidden with an ellipsis. This is extremely useful for card descriptions, preview text, and anywhere you need consistent height.
3 Line Clamp
This paragraph demonstrates 3-line clamping. You can clamp text to any number from 1 to 6 lines. The component uses Tailwind's line-clamp utilities under the hood, which provide excellent browser support and performance. This is perfect for maintaining consistent card layouts.
Semantic HTML
Use the as prop to control which HTML element is rendered. This is crucial for maintaining proper document structure and accessibility.
Page Title (renders as h1)
Section Heading (renders as h2)
Styled like h1 but renders as p - useful when you need the visual style but want to maintain proper heading hierarchy
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Text content to render |
as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label" | "code" | Auto | HTML element to render. Defaults based on variant (h1→h1, h2→h2, small→span, etc.) |
variant | "h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small" | "muted" | "code" | "p" | Preset typography style from shadcn/ui patterns |
size | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | - | Override text size (12px to 36px) |
weight | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | - | Font weight (300 to 800) |
align | "left" | "center" | "right" | "justify" | "left" | Text alignment |
color | "default" | "muted" | "primary" | "destructive" | "success" | "warning" | "default" | Semantic color variant |
transform | "none" | "uppercase" | "lowercase" | "capitalize" | "none" | Text capitalization |
truncate | boolean | false | Single-line truncation with ellipsis |
clamp | 1 | 2 | 3 | 4 | 5 | 6 | - | Multi-line truncation (takes precedence over truncate) |
className | string | - | Additional CSS classes merged with variant styles |