Item

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@gpuixui/components/item";

export const Files = () => (
  <ItemGroup>
    <Item variant="outline">
      <ItemMedia variant="icon">▤</ItemMedia>
      <ItemContent>
        <ItemTitle>design-system.md</ItemTitle>
        <ItemDescription>Tokens and semantic roles.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm">Open</Button>
      </ItemActions>
    </Item>
  </ItemGroup>
);

ItemGroup
└── Item
    ├── ItemHeader      (own line, above)
    ├── ItemMedia       (before the content)
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions     (after the content)
    └── ItemFooter      (own line, below)