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

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

# A

**Type**: component

A - Anchor component for interactive text links Semantic anchor element for links with built-in hover states and accessibility features. Uses "body" variant with underline and smooth color transitions.

## JSX Usage

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

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

## 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

### 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

### href
- **Type**: `string`
- **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

```tsx
// External link
<A href="https://neynar.com" target="_blank" rel="noopener noreferrer">
  Visit Neynar Website
</A>
// Internal navigation
<A href="/dashboard" color="accent">
  Go to Dashboard
</A>
// Composition with Next.js Link
<A asChild>
  <Link href="/about">
    Learn More About Us
  </Link>
</A>
// In paragraph text
<P>
  For more information, <A href="/docs">check our documentation</A> or
  contact support.
</P>
```