@neynar/ui/llm-docs/typography.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Typography

**Type**: component

Typography - Comprehensive text styling component for consistent design system implementation A flexible typography component that provides semantic text variants, color options, and accessibility features. Built with class-variance-authority (CVA) for type-safe variant management and supports both semantic HTML elements and composition patterns via Radix UI Slot. Designed to handle all text styling needs across the application with consistent visual hierarchy and accessibility compliance.

## JSX Usage

```jsx
import { Typography } from '@neynar/ui';

<Typography
  variant={value}
  color={value}
  align={value}
  transform={value}
  weight={value}
  as={value}
  htmlFor="value"
  asChild={true}
  italic={true}
  underline={true}
  strikethrough={true}
  truncate={true}
  srOnly={true}
  className="value"
>
  {/* Your content here */}
</Typography>
```

## Component Props

### variant
- **Type**: `| "heading"
    | "subheading"
    | "body"
    | "bodyEmphasized"
    | "details"
    | "field"
    | "code"
    | "microcopy"
    | "tableCell"
    | "tableHeader"`
- **Required**: No
- **Description**: No description available

### color
- **Type**: `| "default"
    | "muted"
    | "accent"
    | "destructive"
    | "success"
    | "warning"`
- **Required**: No
- **Description**: No description available

### align
- **Type**: `"left" | "center" | "right" | "justify"`
- **Required**: No
- **Description**: No description available

### transform
- **Type**: `"uppercase" | "lowercase" | "capitalize"`
- **Required**: No
- **Description**: No description available

### weight
- **Type**: `"normal" | "medium" | "semibold" | "bold"`
- **Required**: No
- **Description**: No description available

### as
- **Type**: `React.ElementType`
- **Required**: No
- **Description**: No description available

### htmlFor
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### italic
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### underline
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### strikethrough
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### truncate
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### srOnly
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic heading with semantic HTML
<Typography variant="heading" as="h1">
  Welcome to Neynar
</Typography>
// Body text with color variant
<Typography variant="body" color="muted">
  This is secondary body text with reduced visual prominence.
</Typography>
// Code snippet with proper semantics
<Typography variant="code" as="code">
  const message = "Hello, world!";
</Typography>
```
### Example 2
```tsx
// Advanced styling with multiple variants
<Typography
  variant="subheading"
  color="accent"
  align="center"
  weight="semibold"
  italic
  underline
  className="mb-4"
>
  Styled Subheading with Multiple Variants
</Typography>
// Truncated text for constrained layouts
<Typography variant="body" truncate className="max-w-xs">
  This is a very long text that will be truncated with ellipsis when it exceeds the container width
</Typography>
```
### Example 3
```tsx
// Accessibility features
<Typography variant="details" srOnly>
  Additional context for screen readers only
</Typography>
// Form label with proper association
<Typography variant="field" as="label" htmlFor="email-input">
  Email Address
</Typography>
// Composition with asChild for complex structures
<Typography variant="body" asChild>
  <a href="/about" className="hover:underline">
    Learn more about our platform
  </a>
</Typography>
```