React Shared Components
Interactive testing environment for react-shared components
Current: Default
Header
Page header component with user info, bio, image, and social links. Supports multiple layout variants.
Interactive Playground
Customize the Header properties and see the changes in real-time.
Jane Doe
Creator, educator, and entrepreneur sharing my journey.
All Layout Variants
The Header component supports 13 different layout variants. Each layout provides a unique visual style and structure.
Stacked Layout
Jane Doe
Creator, educator, and entrepreneur.
Card Layout
Jane Doe
Creator, educator, and entrepreneur.
No Image Layout
Jane Doe
Creator, educator, and entrepreneur.
No Image Gradient Layout
Jane Doe
Creator, educator, and entrepreneur.
Full Image Stacked Layout
Jane Doe
Creator, educator, and entrepreneur.
Full Image Columns Layout
Jane Doe
Creator, educator, and entrepreneur.
Minimal Layout
Jane Doe
Creator, educator, and entrepreneur.
Brim Layout
Jane Doe
Creator, educator, and entrepreneur.
Nova Layout
Jane Doe
Ode Layout
Jane Doe
Creator, educator, and entrepreneur.
Crest Layout
Jane Doe
Rung Layout
Jane Doe
Creator, educator, and entrepreneur.
Glint Layout
Jane Doe
Creator, educator, and entrepreneur.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| fullName | string | required | User's full name (max 50 chars) |
| userBio | string | undefined | User biography text |
| userImage | string | undefined | URL to user's profile image |
| socialIcons | Record<string, any> | {} | Social media links object |
| layout | HeaderLayout | 'stacked' | Layout variant to use |
| theme | any | undefined | Theme configuration override |
| className | string | undefined | Additional CSS classes |
Usage Notes
Layout Selection
The component supports 13 different layouts. Some layouts are theme-specific (brim, nova, ode, crest, rung, glint) and work best with their corresponding themes.
Name Truncation
Names longer than 50 characters are automatically truncated with ellipsis (...) to maintain layout integrity.
Responsive Design
All layouts are fully responsive and adapt to different screen sizes. Mobile and desktop views may differ significantly for some layouts.
Social Icons Integration
The component integrates with the SocialIcons component to display social media links. Pass an object with platform names as keys and URLs as values.