Powerful and customizable React card header components built for modern applications and websites. These card headers are built using React Aria and styled with Tailwind CSS.
Installation
These card header components do not require any installation, just copy and paste into your project once you've set up Untitled UI. Check out our installation guide to get started.
Card header examples
Below are examples and variations of this card header component:
FAQs
Please refer to our frequently asked questions page for more.
No. Card headers are PRO examples with no CLI package of their own, so you copy them from this page once Untitled UI is set up. They only rely on the Avatar, Badge, Button and Dropdown base components.
No, CardHeaderWithBadge and CardHeaderAvatarWithBadge are static compositions with the copy inlined in the JSX. Copy the markup into your own component and lift the heading, supporting text, badge and actions into your own props.
The action group is two Button elements, one with color="secondary" and one with the default primary color, both at size="sm". Swap the labels, drop one of them, or add iconLeading as needed — the surrounding flex gap-3 wrapper handles the spacing.
The three-dot menu is a Dropdown.Root containing Dropdown.DotsButton and a Dropdown.Popover with a Dropdown.Menu. Each entry is a Dropdown.Item with an icon prop, so add, remove or reorder those items to match your actions.
Yes. The root stacks vertically with px-4 py-5 on small screens and switches to a horizontal row with md:px-6 from the md breakpoint. The three-dot menu is absolutely positioned at top-5 right-4 on mobile and becomes a normal inline element at md and above.
The examples use <Badge color="gray" type="modern" size="sm">. The "modern" type only supports "gray", so to use a color such as "brand" or "success", switch type to "color" or "pill-color" as well.
Use the CardHeaderAvatarWithBadge variant, which places an <Avatar border size="lg" /> to the left of the heading and supporting text. Point src at your own image and set a meaningful alt value.