UNPKG

@neynar/ui

Version:

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

62 lines (51 loc) 1.61 kB
# 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> ```