@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
53 lines (42 loc) • 1.36 kB
Markdown
# SheetTitle
**Type**: component
SheetTitle - Title element for the sheet The main heading for the sheet content. Provides proper semantic heading and accessibility labeling for screen readers. Should be used within SheetHeader. This component is required for proper accessibility - every sheet must have a title.
## JSX Usage
```jsx
import { SheetTitle } from '@neynar/ui';
<SheetTitle
asChild={true}
className="value"
>
{/* Your content here */}
</SheetTitle>
```
## Component Props
### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, merges props with child element instead of rendering an h2
### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling customization
### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Title text content
## Examples
```tsx
// Standard usage in header
<SheetHeader>
<SheetTitle>Edit Profile</SheetTitle>
<SheetDescription>Update your profile information.</SheetDescription>
</SheetHeader>
// With custom styling
<SheetTitle className="text-lg text-blue-600">Settings</SheetTitle>
// As a custom heading level
<SheetTitle asChild>
<h1 className="text-2xl font-bold">Important Notice</h1>
</SheetTitle>
// Dynamic title content
<SheetTitle>Edit {selectedUser?.name || 'User'}</SheetTitle>
```