@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
52 lines (42 loc) • 1.33 kB
Markdown
# SheetHeader
**Type**: component
SheetHeader - Header section for sheet content A container for the sheet's title and description, positioned at the top of the sheet content. Provides consistent spacing and layout for sheet headers. Should contain SheetTitle and optionally SheetDescription for proper accessibility and semantic structure.
## JSX Usage
```jsx
import { SheetHeader } from '@neynar/ui';
<SheetHeader
className="value"
>
{/* Your content here */}
</SheetHeader>
```
## Component Props
### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling customization
### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Header content (typically SheetTitle and SheetDescription)
## Examples
```tsx
// Complete header with title and description
<SheetHeader>
<SheetTitle>Edit Profile</SheetTitle>
<SheetDescription>
Make changes to your profile information.
</SheetDescription>
</SheetHeader>
// Header with title only
<SheetHeader>
<SheetTitle>Quick Actions</SheetTitle>
</SheetHeader>
// With custom styling and border
<SheetHeader className="border-b pb-4 mb-4">
<SheetTitle>Advanced Settings</SheetTitle>
<SheetDescription>
Configure advanced options for your account.
</SheetDescription>
</SheetHeader>
```