Skip to content
All 6 kits from $99 · Everything Bundle $149

Project Grid

LayoutMIT
View in Storybook

Card grid for project listings — title, description, metadata, and action menu.

bun add @otfdashkit/ui

Preview

Project Grid
Loading Storybook preview…

Code

import { GridList, GridListItem, Heading, Body, Caption } from '@otfdashkit/ui'

export function Example() {
  const projects = [
    { name: 'Design System', desc: '32 components · 4 palettes' },
    { name: 'Landing Page',   desc: 'Next.js · 3 sections' },
    { name: 'Dashboard Kit',  desc: 'Expo + Next.js + Hono' },
    { name: 'Marketplace',    desc: 'Y2 scaffold' },
    { name: 'Docs Site',      desc: 'Fumadocs + MDX' },
    { name: 'CLI Tool',       desc: 'otf-cli scaffolder' },
  ]
  return (
    <div className="w-full max-w-3xl">
      <GridList minItemWidth={220} gap={1}>
        {projects.map(p => (
          <GridListItem key={p.name} interactive>
            <Caption>Project</Caption>
            <Heading size="sm" className="mt-1">{p.name}</Heading>
            <Body size="sm" tone="muted" className="mt-1">{p.desc}</Body>
          </GridListItem>
        ))}
      </GridList>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the GridList source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
gapnumber1Gap between items in rem (default 1 = 16px)
minItemWidthnumber240Minimum width per item (px). Columns fill to that, then reflow.