Feature Grid

Bento-style feature grid with glow cards, gradient text titles, and icon badges.

Why ParticleUI

Everything a component library should be.

We've thought through every detail so you can focus on shipping your product.

Electric by default

Every component ships with our OKLCH electric-cyan design language. Looks incredible out of the box — no theming required.

Accessible to the core

Built on Radix UI. Every component is keyboard navigable, screen-reader friendly, and ARIA-compliant.

Fully themeable

Swap the entire design language by changing 4 CSS variables. Dark mode is the default, light mode is supported.

Copy-paste ready

Installs via the ParticleUI CLI. You own the code — no runtime dependency, no version lock-in.

TypeScript first

Every component has full TypeScript types, variant type exports, and JSDoc on every prop.

Particle layer

12 animated particle components that drop in as visual upgrades to your core primitives.

$npx particleui-cli add feature-grid

TSX

import { FeatureGrid } from "@/components/blocks/feature-grid"

export default function Page() {
  return <FeatureGrid />
}

Prop	Type	Default	Required
badge	string	`"Why ParticleUI"`	no
heading	string	`"Everything a component library"`	no
headingGradient	string	`"should be."`	no
description	string	`"We've thought through every detail so you can focus on shipping your product."`	no
features	Feature[]	`defaultFeatures`	no

Source filecomponents/blocks/feature-grid.tsx

Typeblock

Categoriesmarketing, blocks

npm dependencieslucide-react

Registry depsglow-card, gradient-text, badge

Claude skill—