Bento Grid

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

   npx shadcn@latest add @txbrendan/bento-grid

Props

• label

  BentoCard. A small label at the top.

  string

• preview

  BentoCard. A live mock of the feature. With a title under it, its bottom fades out.

  ReactNode

• icon

  BentoCard. An icon over the title, in the brand color, drawn at 28px.

  ReactNode

• title

  BentoCard. What the feature is. It is an h3, and it names the link.

  ReactNode

• description

  BentoCard. What it does. Without a title, it sits at the bottom of the card.

  ReactNode

• href

  BentoCard. Where the card leads. Needs a title, which becomes the link text.

  string

• renderLink

  BentoCard. Draws the link. Spread the props onto your router's link: (props) => <Link {...props} />.

  (props: BentoLinkProps) => ReactNode · default a plain <a>

• pattern

  BentoCard. A field of dots fading down from the top edge, in the card's tone.

  boolean · default false

• tone

  BentoCard. The color of the dots.

  "neutral" | "brand" | "danger" | "success" | "warning" · default "neutral"

• size

  BentoCard. Text size: 13px for a grid of many cards, 16px for a few big ones.

  "md" | "lg" · default "md"

• className

  Extra classes on the root. On BentoGrid it holds the container query.

  string

• BentoGrid

  Part. The grid: one column when narrow, three from 48rem of its own width. Put BentoCards inside.

  ComponentProps<"div">

Accessibility

• Each title is an h3, so put the grid under an h2, like a Headline.
• With an href, the link is the title, stretched over the card. Screen readers hear one link with the title as its name.
• A focused link outlines the whole card.
• Icons, arrows, and the dot pattern are aria-hidden.
• A preview is a picture of the product. Keep it free of real buttons, so nothing inside it takes focus.
• In forced colors the preview's fade is turned off, so nothing is hidden.
• In forced colors each card gets a border, so its edge still shows when its fill is painted away.

Examples

<BentoGrid>
  <BentoCard label="Everyone answers" preview={<AnswersMock />} pattern tone="success" description="Every event has an answer-by date." />
  <BentoCard label="Watch the count" preview={<CountsMock />} pattern tone="danger" description="The number going sits on the event." />
  <BentoCard label="Set the team up" preview={<RolesMock />} pattern tone="brand" description="Leads plan, everyone answers." />
</BentoGrid>

<BentoGrid>
  <BentoCard icon={<Calendar />} title="Calendar feed" description="Add it once and it stays up to date." href="/features/calendar" />
  <BentoCard icon={<Mail />} title="Reminder emails" description="Chase the people who haven't answered." href="/features/reminders" />
  <BentoCard icon={<Download />} title="Download your data" description="Anyone can take their data with them." />
</BentoGrid>