design-infraDesign systems
DESIGN.md → tokens, fonts, type scale.
Report a problem or share feedback← Catalog
Features · Bento
curatedtheme-awarefreeoc/feature-bento
Theme-aware bento grid for feature sections. Tiles span 1, 2 or a full row; hover glow uses --primary.
$
npx shadcn@latest add @design-infra/feature-bentoLive demo — under each design system
brutalist-mono
Everything a new project needs
Pick a design system, pull components, keep agents on-brand.
Curated catalog
~1,000 components, ranked.
Agent skills
find-component, pick-design-system.
Effects
Spotlights, beams, orbs.
Fast
npx shadcn add @oc/…
editorial
Everything a new project needs
Pick a design system, pull components, keep agents on-brand.
Design systems
DESIGN.md → tokens, fonts, type scale.
Curated catalog
~1,000 components, ranked.
Agent skills
find-component, pick-design-system.
Effects
Spotlights, beams, orbs.
Fast
npx shadcn add @oc/…
linear-dark
Everything a new project needs
Pick a design system, pull components, keep agents on-brand.
Design systems
DESIGN.md → tokens, fonts, type scale.
Curated catalog
~1,000 components, ranked.
Agent skills
find-component, pick-design-system.
Effects
Spotlights, beams, orbs.
Fast
npx shadcn add @oc/…
soft-glass
Everything a new project needs
Pick a design system, pull components, keep agents on-brand.
Design systems
DESIGN.md → tokens, fonts, type scale.
Curated catalog
~1,000 components, ranked.
Agent skills
find-component, pick-design-system.
Effects
Spotlights, beams, orbs.
Fast
npx shadcn add @oc/…
- Source
- oc
- Kind
- block
- Categories
- features, bento
- Use as
- drop-in — replaces your component
- Applies to
- featuresbento
- Motion
- on hover · subtle · css · low cost · ignores reduced motion
- Tags
- oc
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- Bento Gridaceternity/bento-gridSimple bento layout. Colours are hard-coded neutral-200/white/black — prefer @oc/feature-bento for theme-aware tiles, or swap classes to bg-card/border.
- Bento Gridmagicui/bento-gridFeature bento with icon + hover CTA. Hard-codes neutral-*/black alpha colours and needs @radix-ui/react-icons — prefer @oc/feature-bento, or swap to bg-card/text-muted-foreground.
- Magic Bentoreact-bits/magic-bentoBento grid with spotlight, border glow, particles and tilt (GSAP). Hard-coded dark palette (#120F17 cards, #2F293A borders, text-white) — only for dark sites, or rework colours.