Component Library
25+ animated, accessible components ready to copy and install.
Open Source
Free to use, fully customizable MIT licensed.
Copy & Paste
No npm install needed — just copy the code.
Design System
Consistent tokens, dark mode, and Tailwind CSS 4 support.
Installation
Usage
import { BentoGrid, BentoCard } from "@/components/pioneerui/bento-grid"
export default function Features() {
return (
<BentoGrid>
<BentoCard colSpan={2} name="Wide card" description="Spans two columns." />
<BentoCard name="Normal card" description="Single column." />
</BentoGrid>
)
}Props — BentoCard
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | undefined | Card title |
description | string | undefined | Card description |
icon | React.ReactNode | undefined | Icon element |
background | React.ReactNode | undefined | Background slot (absolutely positioned) |
colSpan | 1 | 2 | 3 | 1 | Column span |
rowSpan | 1 | 2 | 1 | Row span |
cta | string | undefined | CTA link text |
href | string | undefined | CTA link URL |