Everything your team needs to go from idea to production in record time — without sacrificing quality or breaking the budget.
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 benefits section with sticky left content and scrollable timeline
A two-column benefits section: a left column with the section header and an optional pill-tag row stays pinned in place on desktop while a right column of icon, title, and description rows 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/feature178"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature178"This installs the block to components/beste/block/feature178.tsx and the badge shadcn/ui primitive it depends on.
The installed file exports feature178Demo alongside the block: the exact props behind the preview above. Spread it to get a working sticky timeline in one line.
import { Feature178, feature178Demo } from "@/components/beste/block/feature178";
export default function Page() {
return <Feature178 {...feature178Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Zap, Shield, BarChart3 } from "lucide-react";
import { Feature178 } from "@/components/beste/block/feature178";
export default function Page() {
return (
<Feature178
badge={{ label: "Why choose us", variant: "secondary" }}
heading="Ship faster, scale smarter, <strong>grow confidently</strong>"
description="Everything your team needs to go from idea to production."
tags={[{ label: "No-Code Friendly" }, { label: "SOC 2 Certified" }, { label: "99.99% Uptime" }]}
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 |
tags | TagItem[] | [] | Pill labels shown below the description |
features | FeatureItem[] | [] | Icon, title, and description rows in the scrolling right column |
className | string | – | Extra classes for the outer <section> |
type TagItem = { label: string };
type FeatureItem = { icon: LucideIcon; title: string; description: string };md and up, the left column becomes sticky at top-[100px] (md:sticky md:top-[100px]), so it stays pinned in the viewport while the right column's feature list scrolls past it; below md there is no stickiness and the columns stack top to bottom.tags render as plain <span> pills (bg-muted, rounded-full), not shadcn Badge components, and the row only appears when tags is non-empty.hidden md:block w-px bg-border) is unconditional above md: it always renders once the layout goes two-column, regardless of content.bg-muted circle; there is no per-feature color or size variation, only the icon, title, and description text change.feature60
Sticky sidebar navigation that scrolls to content sections with images and descriptions. Perfect for product feature tours, documentation pages, and guided walkthroughs.
feature209
Sticky intro column beside a scrollable stack of numbered service blocks.