A heading and a grid of feature cards with icon, title and description. Cards lift on hover and carry a soft cursor spotlight.
Features
A focused set of tools that stay out of your way, so your team can spend its time on the work that matters.
Pages render in milliseconds with edge caching and zero layout shift, so nothing ever feels slow.
Encryption in transit and at rest, audit logs and granular roles come built in on every plan.
Share workspaces, leave comments and review changes together without stepping on each other.
Understand what works with live dashboards that surface the few numbers that actually matter.
A typed API, copy-paste snippets and webhooks for every event keep integration painless.
Changes propagate across devices instantly, and offline edits merge cleanly when you reconnect.
npx shadcn@latest add https://hyperblur.dev/r/features-section.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-section.tsx.
import { FeaturesSection } from "@/components/hyperblur/features-section"
<FeaturesSection title="Why teams choose us" columns={3} features={[{ title: "Fast", description: "Renders in milliseconds." }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Features" | Small pill label above the title. Pass an empty string to hide it. |
| title | string | "Everything you need to ship faster" | Section heading. |
| subtitle | string | sample text | Supporting text under the heading. |
| features | { icon?: ReactNode; title: string; description: string }[] | 6 sample features | Cards to render. The icon is optional and sits in a tinted tile. |
| columns | 2 | 3 | 4 | 3 | Desktop column count in grid layout. Collapses to 2 columns below 1024px and 1 below 768px. |
| layout | "grid" | "list" | "grid" | Grid of cards, or a single column of horizontal rows. |
| accent | string | "#2f7bff" | Accent color for the spotlight, icon tiles and eyebrow. |