Components
Loading preview...
A scroll-spy services section. A sticky tab strip at the top tracks the active entry while the reader scrolls through long-form panels with deliverables, optional preview videos, and inline CTAs.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/service-ledgerimport { ServiceLedger } from "@/components/ui/service-ledger";
export default function ServiceLedgerDemo() {
return (
<ServiceLedger
title="Watch a few. The rest are at ruixen.com."
description="Four of 240+ marketing blocks already in the catalog. Hit play on the videos — when you're sold, install is one CLI command away."
entries={[
{
code: "01",
meta: "Heroes",
title: "Heroes that get the click",
description:
"Animated grid frames, motion bars, type that lands word-by-word — ship a hero this week instead of designing from scratch.",
items: [
"200+ blocks themed by your tokens",
"One install command via the shadcn CLI",
"Tailwind v3 + v4 and Radix + Base UI in one source",
"Drop into Next.js, Vite, or any React stack",
],
video: "https://ruixen.com/showcase/hero-bars-light.mp4",
cta: {
href: "https://ruixen.com/docs",
label: "Browse the hero catalog",
},
},
{
code: "02",
meta: "Navigation",
title: "Navigation that scales with your sitemap",
description:
"Apple-style mega menus, dock bars, breadcrumbs with peek — the navigation blocks that make a fifty-page site feel like a five-page one.",
items: [
"Mega menus with column groups and inline previews",
"Smooth open/close with focus trap + restore",
"Keyboard-navigable with full ARIA semantics",
"Mobile-collapsed at 768px without extra wrappers",
],
video: "https://ruixen.com/showcase/apple-mega-nav-dark.mp4",
cta: {
href: "https://ruixen.com/docs",
label: "Browse navigation blocks",
},
},
{
code: "03",
meta: "Proof",
title: "Trust signals that close the gap",
description:
"Integration grids, stat counters, customer logos — the proof block that turns 'maybe' into 'sign me up'.",
items: [
"Logo grids with hover spotlight and dim states",
"Animated stat counters with reduced-motion fallback",
"Integration tiles themed by your brand tokens",
"Drops in below the hero or above the CTA",
],
video:
"https://ruixen.com/landing-page-previews/integration-and-stats-section-light.mp4",
cta: {
href: "https://ruixen.com/docs",
label: "See proof blocks",
},
},
{
code: "04",
meta: "Convert",
title: "CTAs that finish the page",
description:
"Meteor backgrounds, gradient banners, newsletter capture — the closing block that earns its real estate at the bottom of the fold.",
items: [
"Tested copy patterns ready to ship",
"Newsletter, waitlist, and signup variants",
"A/B-ready props for experiment loops",
"Light and dark variants in one CLI add",
],
video: "https://ruixen.com/showcase/cta-meteor-light.mp4",
cta: { href: "https://ruixen.com/docs", label: "Steal these CTAs" },
},
]}
/>
);
}