Layout

Item and AspectRatio

A row for one thing, and media kept at a fixed shape.

import { Item, ItemGroup, AspectRatio } from "@flinbu/seed";

Integrations and a member

FigmaAcme UI Library · synced 2 hours ago

Connected

GitHubacme/design-tokens

SlackPost releases to a channel

Ana RuizDesign lead

Admin

import { Avatar, Badge, Button, Item, ItemGroup } from "@flinbu/seed";
import { GitPullRequest, MessageSquare, PenTool } from "lucide-react";

<div className="flex w-full max-w-lg flex-col gap-base">
  <ItemGroup className="rounded-xl border border-secondary bg-primary">
    <Item media={<PenTool />} title="Figma" description="Acme UI Library · synced 2 hours ago" href="#" actions={<Badge variant="success" dot>Connected</Badge>} />
    <Item media={<GitPullRequest />} title="GitHub" description="acme/design-tokens" href="#" actions={<Button size="sm" variant="secondary">Sync</Button>} />
    <Item media={<MessageSquare />} title="Slack" description="Post releases to a channel" actions={<Button size="sm">Connect</Button>} />
  </ItemGroup>
  <Item variant="outline" media={<Avatar name="Ana Ruiz" status="online" />} title="Ana Ruiz" description="Design lead" actions={<Badge appearance="outline">Admin</Badge>} />
</div>

AspectRatio

16:9

1:1

import { AspectRatio } from "@flinbu/seed";

<div className="grid w-full max-w-md grid-cols-2 gap-sm">
  <AspectRatio><div className="flex size-full items-center justify-center text-tertiary body-body-4-regular">16:9</div></AspectRatio>
  <AspectRatio ratio={1}><div className="flex size-full items-center justify-center text-tertiary body-body-4-regular">1:1</div></AspectRatio>
</div>

Use it for

Integrations, members, files, settings; thumbnails and previews.

Props

Prop	Type	Default	Description
`title / description`	`ReactNode`	–	Text.
`media`	`IconPropReactNode`	–	An icon (in a tile) or an Avatar.
`actions`	`ReactNode`	–	Buttons or Badges.
`href`	`string`	–	The row becomes a link.
`variant`	`'plain''outline''muted'`	`'plain'`	Frame.
`AspectRatio: ratio`	`number`	`16/9`	Width over height.

Accessibility

With href the title link covers the row and actions stay separate targets; inside ItemGroup rows are list items.