@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
62 lines (51 loc) • 1.61 kB
Markdown
# SheetDescription
**Type**: component
SheetDescription - Description text for the sheet Provides additional context about the sheet's purpose or instructions. Appears below the title with muted styling. Should be used within SheetHeader. While optional, it's recommended for better accessibility and user understanding.
## JSX Usage
```jsx
import { SheetDescription } from '@neynar/ui';
<SheetDescription
asChild={true}
className="value"
>
{/* Your content here */}
</SheetDescription>
```
## Component Props
### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, merges props with child element instead of rendering a p element
### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling customization
### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Description text content
## Examples
```tsx
// Standard usage with instructional text
<SheetHeader>
<SheetTitle>Edit Profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
// Warning or important information
<SheetDescription className="text-orange-600">
This action cannot be undone.
</SheetDescription>
// Custom styled description
<SheetDescription asChild>
<p className="text-sm text-gray-600 italic">
Changes will be saved automatically.
</p>
</SheetDescription>
// Contextual help description
<SheetDescription>
Use this form to update your notification preferences.
Changes take effect immediately.
</SheetDescription>
```