@neynar/ui/docs/llm/components/display.md

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

# Display Components

## Avatar
User profile pictures with fallbacks and status indicators.

```tsx
import { Avatar, AvatarImage, AvatarFallback } from "@neynar/ui"

// Basic avatar with fallback
<Avatar>
  <AvatarImage src="/user.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

// Sizes: sm, default, lg
<Avatar className="h-6 w-6">
  <AvatarImage src="/user.jpg" />
  <AvatarFallback>U</AvatarFallback>
</Avatar>
```

## Typography
Consistent text styling with semantic variants and accessibility features.

```tsx
import { Typography } from "@neynar/ui"

// Basic usage with semantic variants
<Typography variant="heading" as="h1">
  Main Page Title
</Typography>

<Typography variant="subheading" as="h2">
  Section Header
</Typography>

<Typography variant="body">
  Standard paragraph text content with proper line height and spacing.
</Typography>

<Typography variant="bodyEmphasized">
  Emphasized text for important information.
</Typography>

// Color and styling options
<Typography variant="body" color="muted">
  Secondary information in muted color
</Typography>

<Typography variant="details" color="destructive">
  Error or warning text
</Typography>

// Form field labels
<Typography variant="field" as="label" htmlFor="email">
  Email Address
</Typography>

// Code snippets
<Typography variant="code" as="code">
  const example = "Hello, world!";
</Typography>

// Table content
<Typography variant="tableHeader" as="th">
  Column Header
</Typography>

<Typography variant="tableCell" as="td">
  Cell content
</Typography>

// Microcopy for fine print
<Typography variant="microcopy" color="muted">
  Terms and conditions apply
</Typography>

// Advanced styling
<Typography 
  variant="body" 
  color="accent" 
  italic 
  underline 
  align="center"
>
  Styled text with multiple options
</Typography>

// Truncated text
<Typography variant="body" truncate className="max-w-xs">
  Long text that will be truncated with ellipsis
</Typography>

// Screen reader only content
<Typography variant="details" srOnly>
  Additional context for accessibility
</Typography>
```

## Chart
Data visualization using Recharts with consistent theming.

```tsx
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@neynar/ui"
import { Bar, BarChart, ResponsiveContainer } from "recharts"

<ChartContainer config={{ value: { label: "Value", color: "hsl(var(--chart-1))" } }}>
  <BarChart data={data}>
    <Bar dataKey="value" fill="var(--color-value)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>
```

## Carousel
Image/content slideshows with navigation controls.

```tsx
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@neynar/ui"

<Carousel className="w-full max-w-xs">
  <CarouselContent>
    {items.map((item, index) => (
      <CarouselItem key={index}>
        <div className="p-1">
          <img src={item.image} alt={item.title} />
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```