Bento showcase

12-column marketing bento with border shimmer, monochrome title motion, and docs/secure icon treatments.

Preview & code

GFA Studio CLI · Coming soon

GFA showcase bento

The GFA design-system shell brings components, blocks, documentation, and portable HTML examples together in this monorepo. Images in the left column load from public/gfa-bento; other tiles are copy placeholders — swap in your own product messaging.

Consistency

One theme file, shared tokens, and ready-made components — keep the same visual language across your Next.js app.

Locales (i18n)

Docs

Live-preview component pages and props tables

Focus

Accessible, type-safe UI primitives

Minimal interface layer

GFA

Development & design studio — shared design-system shell

Secure defaults

Examples for NextAuth sessions, Prisma data access, and route-handler patterns

Button showcase routes

Blocks with motion

GFA Studio CLI

Stack

Next.js, Prisma, NextAuth — monorepo layout

globals.css tokens

Portable HTML

Light / dark theme

pnpm

Installation

CLI

GFA Studio CLI — Coming soon

The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.

Artifact JSON

Download

https://ui.gkhn.dev/gfa/bento-grid-lab.json

Manual

Download the component source from https://ui.gkhn.dev/gfa/bento-grid-lab.json (or copy from this repo: apps/web/src/blocks/gfa/bento-grid-lab.tsx).
Place it in your project (for example: ./src/blocks/gfa/bento-grid-lab.tsx) and adjust imports/aliases.
Ensure cn from @/lib/utils exists.
Theme tokens and utilities should align with globals.css.
Copy bento-eye-macro.png and bento-minimalist-ripples.png into public/gfa-bento/ (or change the paths in the block).
Keep the @property, @keyframes, and .gfa-bento-* / .gfa-lab-* utility blocks from this repo’s globals.css, or use the portable HTML tab’s stylesheet on static sites.

Step-by-step getting started guide →

Dependencies

Uses next/image, lucide-react (BookOpen, ShieldCheck), and GFA utilities in globals.css (border orbit, title/hero shimmer, docs/secure icon motion). Client-only.

Props

Prop	Type	Default	Description
className	string	—	Optional wrapper classes on the outer stack (e.g. max width).