@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
115 lines (94 loc) • 2.49 kB
Markdown
# P
**Type**: component
P - Paragraph component for body text content Standard paragraph element for readable body text. Uses "body" variant with p semantic element. Optimized for readability with appropriate line height and font size.
## JSX Usage
```jsx
import { P } from '@neynar/ui';
<P
color={value}
align={value}
transform={value}
weight={value}
htmlFor="value"
asChild={true}
italic={true}
underline={true}
strikethrough={true}
truncate={true}
srOnly={true}
className="value"
>
{/* Your content here */}
</P>
```
## Component Props
### 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
### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available
### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available
## Examples
```tsx
// Standard paragraph
<P>This is standard body text that provides information to the user.</P>
// With color variants
<P color="muted">Secondary information with reduced visual prominence.</P>
// With custom spacing
<P className="mb-6">Paragraph with custom bottom margin for layout control.</P>
// Truncated paragraph
<P truncate className="max-w-md">
Long paragraph content that will be truncated with ellipsis
</P>
```