imajin/node_modules/@lilith/ui-typography

@lilith/ui-typography

Typography components with theme-aware font families and sizing. Supports different typography styles per theme.

Features

• Heading - semantic heading component (h1-h6)
• Text - body text component with size variants
• Theme-aware - automatically adapts to active theme
• Responsive - fluid sizing where appropriate
• Semantic HTML - proper heading hierarchy

Theme Typography

Theme	Headings	Body	Sizing
Luxe	Playfair Display (serif)	Inter (sans-serif)	Fluid with clamp()
Lilith/Cyberpunk	Courier New (mono)	Arial (sans-serif)	Fixed sizing

Installation

pnpm add @lilith/ui-typography

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "styled-components": "^6.0.0"
}

Usage

Heading

Semantic heading component:

import { Heading } from '@lilith/ui-typography';

// Heading levels
<Heading as="h1">Page Title</Heading>
<Heading as="h2">Section Title</Heading>
<Heading as="h3">Subsection Title</Heading>
<Heading as="h4">Card Title</Heading>
<Heading as="h5">Small Title</Heading>
<Heading as="h6">Tiny Title</Heading>

// Visual size override (keeps semantic level)
<Heading as="h2" size="h1">Visually Large H2</Heading>
<Heading as="h3" size="h2">Visually Medium H3</Heading>

// With custom weight
<Heading as="h1" weight="normal">Light Heading</Heading>
<Heading as="h1" weight="bold">Bold Heading</Heading>

// Color variants
<Heading as="h2" color="primary">Primary Heading</Heading>
<Heading as="h2" color="secondary">Secondary Heading</Heading>
<Heading as="h2" color="muted">Muted Heading</Heading>

// Alignment
<Heading as="h1" align="center">Centered Heading</Heading>
<Heading as="h1" align="right">Right-Aligned Heading</Heading>

Text

Body text component:

import { Text } from '@lilith/ui-typography';

// Size variants
<Text size="xs">Extra small text</Text>
<Text size="sm">Small text</Text>
<Text size="md">Medium text (default)</Text>
<Text size="lg">Large text</Text>
<Text size="xl">Extra large text</Text>

// Color variants
<Text color="primary">Primary text</Text>
<Text color="secondary">Secondary text</Text>
<Text color="muted">Muted text</Text>
<Text color="success">Success text</Text>
<Text color="warning">Warning text</Text>
<Text color="error">Error text</Text>

// Weight variants
<Text weight="normal">Normal weight</Text>
<Text weight="medium">Medium weight</Text>
<Text weight="semibold">Semibold weight</Text>
<Text weight="bold">Bold weight</Text>

// As different elements
<Text as="p">Paragraph text</Text>
<Text as="span">Inline text</Text>
<Text as="label">Label text</Text>

// Line height
<Text lineHeight="tight">Tight line height</Text>
<Text lineHeight="normal">Normal line height</Text>
<Text lineHeight="relaxed">Relaxed line height</Text>

// Text alignment
<Text align="left">Left aligned</Text>
<Text align="center">Center aligned</Text>
<Text align="right">Right aligned</Text>

// Text transform
<Text transform="uppercase">Uppercase text</Text>
<Text transform="lowercase">Lowercase text</Text>
<Text transform="capitalize">Capitalize text</Text>

// Truncate long text
<Text truncate>This is a very long text that will be truncated with an ellipsis...</Text>

// Max lines (line clamp)
<Text maxLines={2}>
  This text will be clamped to 2 lines maximum and will show an ellipsis
  if it exceeds that limit.
</Text>

API Reference

HeadingProps

Prop	Type	Default	Description
as	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	'h1'	HTML element
size	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	-	Visual size override
color	'primary' | 'secondary' | 'muted'	'primary'	Text color
weight	'normal' | 'medium' | 'semibold' | 'bold'	'bold'	Font weight
align	'left' | 'center' | 'right'	'left'	Text alignment
className	string	-	Additional CSS class
children	ReactNode	-	Heading content

TextProps

Prop	Type	Default	Description
as	'p' | 'span' | 'label' | 'div'	'p'	HTML element
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Font size
color	'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'error'	'primary'	Text color
weight	'normal' | 'medium' | 'semibold' | 'bold'	'normal'	Font weight
align	'left' | 'center' | 'right'	'left'	Text alignment
lineHeight	'tight' | 'normal' | 'relaxed'	'normal'	Line height
transform	'none' | 'uppercase' | 'lowercase' | 'capitalize'	'none'	Text transform
truncate	boolean	false	Truncate with ellipsis
maxLines	number	-	Line clamp
className	string	-	Additional CSS class
children	ReactNode	-	Text content

Examples

Page Layout

import { Heading, Text } from '@lilith/ui-typography';

function ArticlePage() {
  return (
    <article>
      <Heading as="h1">Article Title</Heading>
      <Text size="lg" color="secondary">
        Published on January 1, 2024
      </Text>

      <Heading as="h2">Introduction</Heading>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Text>

      <Heading as="h2">Main Content</Heading>
      <Text>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
      </Text>

      <Heading as="h3">Subsection</Heading>
      <Text size="sm" color="muted">
        Additional details here.
      </Text>
    </article>
  );
}

Card Component

import { Heading, Text } from '@lilith/ui-typography';
import { Card } from '@lilith/ui-primitives';

function ProductCard({ name, description, price }) {
  return (
    <Card>
      <Heading as="h3" size="h4">{name}</Heading>
      <Text color="secondary" maxLines={2}>
        {description}
      </Text>
      <Text size="lg" weight="bold" color="primary">
        ${price}
      </Text>
    </Card>
  );
}

Types

import type {
  HeadingProps,
  TextProps,
} from '@lilith/ui-typography';

License

MIT