Consolidate your entire workflow into a single, powerful platform. Less context switching, more shipping.
See measurable improvements from day one. Our optimized infrastructure delivers sub-100ms response times across every touchpoint.
SOC 2 Type II certified with end-to-end encryption. Your data stays protected with automatic backups and role-based access controls.
Go beyond vanity metrics. Track real business impact with custom dashboards, cohort analysis, and automated reporting delivered weekly.
Connect with 200+ tools your team already uses. Two-click setup with Slack, HubSpot, Salesforce, and every major platform.
Serve users in 190+ countries with localized content delivery. Auto-scaling infrastructure handles traffic spikes without breaking a sweat.
Let intelligent workflows handle the repetitive work. From lead scoring to content optimization, AI keeps your pipeline moving 24/7.
Two-column layout with sticky stats and scrollable feature cards
A two-column layout: a sticky left column carries the section header and a 2-up grid of headline stats, while a right column of bordered feature cards scrolls past it, separated by a single vertical divider.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/feature179"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature179"This installs the block to components/beste/block/feature179.tsx and the badge shadcn/ui primitive it depends on.
The installed file exports feature179Demo alongside the block: the exact props behind the preview above. Spread it to get a working sticky stats layout in one line.
import { Feature179, feature179Demo } from "@/components/beste/block/feature179";
export default function Page() {
return <Feature179 {...feature179Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Zap, Shield, BarChart3 } from "lucide-react";
import { Feature179 } from "@/components/beste/block/feature179";
export default function Page() {
return (
<Feature179
badge={{ label: "Platform", variant: "secondary" }}
heading="One platform to <strong>replace them all</strong>"
description="Consolidate your entire workflow into a single platform."
stats={[
{ value: "99.99%", label: "Uptime SLA" },
{ value: "50ms", label: "Avg Response" },
{ value: "10M+", label: "API Requests/Day" },
{ value: "4.9/5", label: "Customer Rating" },
]}
features={[
{ icon: Zap, title: "Instant Performance Boost", description: "Sub-100ms response times." },
{ icon: Shield, title: "Enterprise-Grade Security", description: "SOC 2 Type II certified." },
{ icon: BarChart3, title: "Actionable Analytics", description: "Custom dashboards and cohort analysis." },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Optional eyebrow badge in the sticky column |
heading | string | – | Sticky column heading. Supports inline <strong> markup, rendered via dangerouslySetInnerHTML |
description | string | – | Sticky column intro text |
stats | StatItem[] | [] | Headline value/label pairs shown in a 2-up grid |
features | FeatureItem[] | [] | Bordered icon, title, and description cards in the scrolling right column |
className | string | – | Extra classes for the outer <section> |
type StatItem = { value: string; label: string };
type FeatureItem = { icon: LucideIcon; title: string; description: string };md and up, the left column becomes sticky at top-[100px], staying pinned while the right column's feature cards scroll past; below md the columns stack and stickiness is disabled entirely.stats always render in a fixed grid-cols-2 grid, regardless of how many stat entries are passed; there is no dynamic column recalculation like in some other Feature blocks.features is wrapped in its own rounded-md border bg-card p-6 card, so the right column reads as a stack of discrete panels rather than a continuous list.hidden w-px bg-border md:block) always renders once the two-column layout is active, independent of content.feature178
Two-column benefits section with sticky left content and scrollable timeline
feature209
Sticky intro column beside a scrollable stack of numbered service blocks.
feature285
A feature list with a sticky column, where a serif heading settles in word by word above the intro and a pill action, beside ruled rows that each blur in with a round muted icon, a serif title and a description.