Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A "three things we do well" feature section, contained inside a single rounded bordered card. Three columns share a subgrid so the title rows align even when the illustrations have wildly different heights. At md+ the columns sit side by side with vertical dividers; at smaller sizes they stack with horizontal dividers.
The three illustrations are visually distinct on purpose: a chat bubble + avatar + @mention for messaging; an uptime stat card with 40 vertical bars (mostly emerald, six muted "downtime" ticks) faded by a horizontal mask on the right; a vertical-line timeline with three events, the middle event raised into its own highlighted card with a stack of two avatars and a primary-coloured bullet.
Key Features:
bg-card/50 surface with a soft shadow and ring, contains the entire feature triodivide-x at md+, horizontal divide-y below@bernard rendered in text-primary, avatar uses an inline gradient circle with an initial (no external image)bg-muted-foreground to suggest brief downtime among an emerald baseline; right edge fades via a horizontal masklucide-react dependency. Pure HTML + Tailwind primitives"use client" boundary| Element | Purpose |
|---|---|
| Outer card | Bordered + ringed + shadowed surface that contains the trio |
FeatureColumn | One column — uses subgrid so its title aligns with the sibling columns. Top row holds the illustration, bottom row holds the title + description |
ChatIllustration | Avatar + name on top, chat bubble below with a @mention highlighted in text-primary |
UptimeIllustration | Card-on-card with "Uptime / 99.9%" header and a 40-bar strip; right edge fades via a horizontal maskImage |
DOWN_BAR_INDICES | A Set<number> of bar indices to render in bg-muted-foreground instead of emerald — flips the vibe from "perfect" to "almost-perfect" |
TimelineIllustration | Vertical dashed line + three events. The middle event is rendered in its own highlighted card via -mx-5 + an offset bullet |
BulletDot | Reusable bullet with muted or primary border, accepts an offsetX so it can align to the timeline regardless of the row's padding |
Avatar / FramedAvatar / AvatarStack | Inline gradient-circle avatars with initials. FramedAvatar adds a white border for the avatar-stack overlap effect |
aria-hidden) — the column titles and descriptions carry the screen-reader meaning. If you swap an illustration with content that should be announced, drop the aria-hidden.Set<number> for the down-bar indices so lookups are O(1) regardless of how many bars are rendered. Increasing UPTIME_BAR_COUNT to 100+ has no measurable cost."use client" boundary — safe to render inside Next.js App Router server pages.