HeaderPaper

The HeaderPaper component displays a formatted paper-style header section with icon, title, optional description, optional tools/actions, and content block underneath. Commonly used as a section header container.

import { HeaderPaper } from "tawuniya";

👉 View in Storybook

---

Prop	Type	Default	Description
icon	React.ReactNode | string (optional)	—	Icon displayed on the left. Accepts icon name or a custom ReactNode.
title	string	—	Main header title.
description	string (optional)	—	Optional small text displayed under the title.
additional	React.ReactNode (optional)	—	Right-side custom content (actions, info, buttons, etc.).
children	React.ReactNode	—	Content displayed below the header section.
classNames	Partial<{ wrapperClassName, titleClassName, descriptionClassName, iconWrapperClassName, iconClassName }>	—	Override internal class names.

Basic Usage

<HeaderPaper
  icon="network"
  title="Header Title"
  description="Optional description"
>
  <div>Body content here</div>
</HeaderPaper>

Without Description

<HeaderPaper icon="network" title="Header without description">
  <div>Body content</div>
</HeaderPaper>

Custom ReactNode Icon

<HeaderPaper
  icon={<Icon name="user" className="size-6" />}
  title="Custom Icon"
  description="Using a custom ReactNode"
>
  <div>Body content</div>
</HeaderPaper>

With Additional Content

<HeaderPaper
  icon="network"
  title="Actions on the right"
  additional={<Button size="sm">Action</Button>}
>
  <div>Section content</div>
</HeaderPaper>

Custom Class Names

<HeaderPaper
  icon="network"
  title="Customized Header"
  classNames={{
    wrapperClassName: "bg-blue-50 border border-blue-200",
    titleClassName: "text-blue-700",
    descriptionClassName: "text-blue-500",
    iconWrapperClassName: "bg-blue-100",
    iconClassName: "text-blue-700",
  }}
>
  <div>Styled section content</div>
</HeaderPaper>

Features

• Supports string or ReactNode icons
• Optional description
• Layout adjusts automatically for responsive containers
• Full classNames customization