# Item: Header and footer

> `<ItemHeader />` and `<ItemFooter />` take a full row above and below the content.

Example: https://hextaui.com/docs/item/examples/header-footer
Component docs: https://hextaui.com/docs/item.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/item-header-footer.json
```

This adds `components/examples/item/header-footer.tsx` with the Item component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/item/header-footer.tsx"
import { Badge } from "@/components/ui/badge"
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemHeader,
  ItemTitle,
} from "@/components/ui/item"

export function ItemHeaderFooter() {
  return (
    <Item variant="outline" className="max-w-sm" render={<a href="#" />}>
      <ItemHeader>
        <span className="text-xs text-muted-foreground">hextaui/hextaui</span>
        <Badge>Open</Badge>
      </ItemHeader>
      <ItemContent>
        <ItemTitle>Rework the item component</ItemTitle>
        <ItemDescription>
          Grouped surfaces, a gliding hover highlight and selectable rows.
        </ItemDescription>
      </ItemContent>
      <ItemFooter>
        <span className="text-xs text-muted-foreground">
          #482 · 3 reviewers
        </span>
        <span className="text-xs text-muted-foreground">2h ago</span>
      </ItemFooter>
    </Item>
  )
}
```

## Props in this example

### Item

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Item examples

- [Grouped](https://hextaui.com/docs/item/examples/pressed.md)
- [Hover highlight](https://hextaui.com/docs/item/examples/image.md)
- [Selectable](https://hextaui.com/docs/item/examples/selectable.md)
- [Variants](https://hextaui.com/docs/item/examples/variants.md)
- [Sizes](https://hextaui.com/docs/item/examples/sizes.md)
- [Avatar](https://hextaui.com/docs/item/examples/avatar.md)
- [People](https://hextaui.com/docs/item/examples/people.md)
- [Actions](https://hextaui.com/docs/item/examples/actions.md)
- [Separator](https://hextaui.com/docs/item/examples/separator.md)
- [Long content](https://hextaui.com/docs/item/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/item/examples/rtl.md)