The showcase
402 components.
One door.
A closed registry of curated, oklch-themed shadcn/ui components. Lineage on every block. Bearer-token install.
Registry · Live
402 components · 5 categories
Top categories
Density
Curated
402
Categories
36
Sources
5
Component gallery
Browse the catalog.
Showing 368 of 368 components
Timeseries Card
Card-wrapped daily time-series chart (area or bar variant) with hidden Y axis, dashed grid, brand-token styling, styled tooltip, and an empty state.
Ranked List
Card-wrapped ranked leaderboard with truncated labels, tabular values, and an optional share-of-leader bar behind each row.
Depth Stacked Hero
Depth-stacked hero with a left-aligned headline, dual CTAs, and a foreground glass pane that overlaps the next section, carrying a signature cyan top edge-light and radial bloom.
Elevation Ladder Capability Set
A capabilities section presenting four senior capabilities as an asymmetric staggered ladder of overlapping obsidian glass panes, with a lone cyan edge-light and radial bloom on the top pane.
Overlapping Work Strata Gallery
A peeled deck of selected-work project panes that overlap at staggered vertical offsets and Z-depths, with one cyan edge-lit focus pane lifted above the obsidian glass strata.
Engagement Process Cutaway
Depth-cutaway feature section presenting Vandoko's engagement approach as three nested phase panes stacked at descending depth inside one elevated obsidian-glass pane, with a lone cyan edge-light and a copy column tucked behind at a lower elevation.
Elevated Focus Pricing Strata
Elevated-focus engagement pricing where the recommended tier is lifted forward as a glass pane with a lone cyan edge-light and bloom, flanked by recessed sibling tiers.
Stacked Glass Strata Footer
A calm multi-column obsidian footer with a lightly-elevated glass brand pane carrying the single cyan top edge-light that bookends the Stacked Glass Strata page system, five link columns with dot-prefixed eyebrows, and a minimal copyright + legal + social bottom bar.
Split Workflow Pipeline Hero
Split hero with a live workflow canvas: a brand-promise left column and a right-side sprint pipeline of four obsidian node cards (Brief, Design, Build, Ship) linked by curved SVG connectors, with one cyan active node.
Sprint Pipeline Feature Band
A full-bleed dark feature band that renders an end-to-end sprint as one horizontal pipeline — stage nodes threaded by a single connector rail with exactly one cyan-active node.
Selected Work Canvas Rail
Tab-filtered selected-work showcase that lays project node-cards along a connector rail; the focused project lifts and earns a cyan node marker.
Vertical Capability Spine
An expandable capability accordion laid along a vertical workflow rail — each item is a node dot on a 1px connector line; the open item lights its node cyan and glows its panel while closed items stay quiet and monochrome.
Statement Headline Testimonial
An oversized statement headline over a row of short attributed client quotes with mono attribution and a cyan quote-mark accent, plus a carousel when more than three quotes are supplied.
Spotlit Plan Pricing
Dark three-plan pricing block whose recommended middle tier is the single active node — elevated, ring-lit, and washed by an inline cyan radial spotlight — with a monthly/annual toggle and a hand-drawn save annotation, set on a faint dot-grid.
Editorial Sticky Dropdown Navbar
Clean full-width sticky navbar for the Vandoko brand: wordmark with a trailing superscript cyan dot (the lone accent), a NavigationMenu link cluster with per-item dropdown panels, a ghost "See the work" text link, and a solid cyan "Start a sprint" CTA. Dropdowns show label + description rows, no icons. Mobile collapses to a top Sheet with Accordion expansion for dropdown items.
Oversized Display Hero
Type-led editorial hero where a massive tight-leading display headline carries the brand promise, with one cyan signal word, dual CTAs, and a live-count overlapping-avatar trust row.
Editorial Feature Statement
A type-led editorial feature section: a single sub-display positioning statement with a lone cyan signal phrase, generous left-aligned space, and one supporting detail row of oversized numerals that count up on view.
Oversized Live Figures
A type-led proof-by-numbers band of oversized animated numerals that count up on scroll-into-view via NumberFlow, anchored by a single cyan signal figure.
Oversized CTA Band
A full-width dark closing-ask band where a massive condensed display headline fills the band, with a single cyan accent word and a cyan arrow on the primary CTA plus a quiet ghost secondary link.
Quiet Sign-Off Footer
Clean dark-obsidian footer with the Vandoko wordmark accented by a single cyan dot, five-column link sitemap (desktop grid / mobile accordion), a newsletter input row, and a minimal copyright bottom bar with lucide social icons.
Instrument Panel Navbar
Sticky full-width navigation bar styled as a dark control-surface. The bar background carries a barely-visible CSS radial-gradient dot-matrix (~4% foreground opacity). The bottom edge is a 1 px hairline with a two-segment linear-gradient: the left third fades from faint cyan (--primary at 40% opacity) and the right two-thirds resolve to the standard border token. No halos, no background washes — depth comes from edge-light only. Desktop uses NavigationMenu with dropdown panels; mobile uses a hamburger-triggered side Sheet with inline accordion expand. Cyan is the lone signal: CTA button and left-edge glow.
Textured Instrument Hero
Page headline hero on a dot-matrix and film-grain control surface — cyan as the lone signal — with a gradient-border framed live capture readout: an inline-SVG waveform above a short transcript with one phrase highlighted in an in-place cyan mark.
Analytics Surface Data Card
A demonstrative analytics-surface metrics panel with a balance HUD figure, an inline SVG sparkline, and a compact signal table of colored deltas and row sparklines on a dot-matrix textured card with a cyan gradient top-border.
Tabbed HUD Control Surface
A tabbed instrument-panel feature section where each tab swaps in a different live demonstrative instrument — radial ring gauges, a team network graph, and a telemetry bento — on one dark dot-matrix control surface with gradient borders and a single cyan signal.
Tactile Platform Keycap Card
A textured get-the-platform surface with embossed keycap tiles for macOS, Windows, Web, and CLI that swap the install command and primary action on selection.
Instrument Panel Footer
Multi-column dark footer for the instrument-panel campaign page. A faint CSS dot-matrix texture overlays the obsidian surface; a 1 px top hairline carries a short cyan edge-light segment as the lone signal. Four link columns (Product / Platform / Docs / Company) sit beside the Vandoko wordmark on desktop. Social icons and legal links live in the bottom bar.
Particulate Palette Hero
Interactive hero that shatters an on-brand image into thousands of physics particles carrying their pixel colors (ambient drift + hover-blow) while a median-cut algorithm harvests the dominant palette live as a swatch dock.
Pylon Terrain Hero
Live three.js WebGL hero rendering a circular field of instanced pylons displaced by simplex noise (height = noise² · maxHeight), color-ramped teal→cyan→azure over obsidian fog, pannable with drag momentum and slow time drift.
Floating Pill Split-Rail Navbar
A fixed floating pill navbar with a split-justified three-zone rail: "Vandoko" wordmark with a 2px cyan superscript dot (lone signal) on the left, four mono-tracked small-caps flat links in the centre, and a ghost "Contact" text link plus one solid cyan "Start a sprint" button on the right. On scroll the pill contracts to tighter vertical padding and gains a hairline top border. No icons anywhere. Collapses to a top-anchored Sheet drawer on mobile.
Editorial Ledger Hero
Asymmetric 7/5 editorial hero stating the Vandoko brand promise as an oversized three-line headline, with a ghosted index numeral, a single cyan hairline under-mark, and an offset work-media panel lifted by one focused cyan glow.
Hairline Trust Ledger Strip
A static single-row band of monochrome partner wordmarks at reduced opacity, bounded by 1px hairline rules (section border-y) and introduced by a flush-left mono small-caps eyebrow. No cards, no chips, no color — pure editorial ledger texture.
Capability Ledger Feature
Editorial stepped-ledger of capabilities — oversized ghosted index numerals, full-width cyan hairline separators, staggered rows, and a single cyan flag on the flagship discipline.
Pull Quote Spotlight
A single oversized client pull-quote set at display size with a giant ghosted quotation glyph bleeding off the top-left and a lone cyan hairline rule beneath the mono small-caps attribution.
Engagement Model Ledger
Asymmetric 5/7 pricing ledger with a sticky framing block and stacked horizontal engagement-tier rows, one elevated row carrying a single cyan left-border.
Oversized Wordmark Sign-Off Footer
A monumental closing footer with a CTA band above a full-width hairline, a compact mono small-caps sitemap grid, and the brand wordmark rendered at display scale in --muted bleeding off the bottom edge — with a single cyan superscript dot as the lone signal bookending the page.
Contained Media Slide Hero
Brand-promise hero whose contained framed image cross-fades as you hover the three Vandoko discipline slides.
Client Trust Logo Marquee
Headline-free scrolling marquee of muted client wordmarks forming a quiet trust strip.
Sprint Outcome Split Feature
Split feature pairing a tight headline and outcome list with framed product media.
Six-Deliverable Capabilities Grid
Section-badged six-up capabilities grid of bordered icon cards.
Four-Column Testimonial Carousel
Left-aligned testimonial carousel with a four-up rail of quote cards and a cyan active-snap pager.
Yearly Metrics Ruler Timeline
Track-record stat block whose figures animate via NumberFlow along a primary-ticked ruler baseline.
Selected Work Outcome Cards
Three-column grid of selected-work cards, each a framed image with title, outcome line, result metric, and case-study link.
Contained Image Sprint CTA
Contained framed-image closing CTA with a scrim-backed headline and a primary "Start a sprint" CTA.
Centered Container Footer
Centered, container-width site footer with brand wordmark, social icons, nav grid, and legal rule.
Icon Mega-Panel Platform Navbar
Platform navbar whose desktop navigation-menu opens icon mega panels, with a mobile accordion drawer and a "Start a sprint" CTA.
Integrations Orbit Hero
Integrations-angled brand hero with app/tool tiles orbiting a square product preview on counter-rotating concentric rings.
Integration Ecosystem Grid
Grid of integration categories showing the tools Vandoko works across, each a neutral lucide glyph with a short note.
Orbiting Community Avatar CTA
Community conversion section with concentric counter-rotating rings of people avatars orbiting a center headline and CTA.
Sprint & Scale Pricing
Two-plan pricing block with a monthly-annual radio toggle that switches prices and a cyan discount badge on annual.
Minimal Site Footer
Multi-column site footer pairing a brand wordmark and contact sign-off with a nav grid, copyright, legal links, and social buttons.
SCB Hero 06
Split hero with framed media surface, announcement pill, and paired CTAs
Scb Outcome Stack 01
Section-grammar component (pressure/move/proof/shift/next).
Features Dropdown Navbar
Responsive navbar with a two-column features dropdown on desktop and a sheet + accordion on mobile, sign-in + solid primary CTA pair.
Crossfade Stack Hero
Two-column split hero: oversized tight-leading headline, dual pill CTAs with hover lift, and a framed media surface housing four crossfading image-stack slots.
Capability Integration Grid
Two-column intro with an outline badge, then six bordered link cards each with a logo tile and pill CTA.
Dual-Audience Feature Comparison
Two side-by-side bordered panels for distinct audiences, each with heading, body, two arrow-link CTAs, and three icon benefit rows.
Split Sprint Pitch Download
Two-column sprint pitch: headline, checkmarked deliverables, paired pill CTAs, framed product media, and a platform availability row.
Logo Nav Newsletter Footer
Footer with brand block + social glyphs, two nav columns, a newsletter sign-up strip, and a copyright/legal row.
Capability Mega-Dropdown Navbar
Premium dark navbar with a data-driven Product mega-dropdown, flat nav links, and a sign-in + solid primary CTA pair; collapses to a top sheet with accordion on mobile.
Centered Product Hero
Near-full-screen centered hero with announcement pill, oversized headline, dual pill CTAs, trust microcopy, a framed inline product-UI mock, and converging wire-line illustrations.
Trusted-By Logo Cloud
A trusted-by strip with an eyebrow pill and a responsive row of text wordmarks rendered in muted foreground — no external images.
Sprint Capabilities Feature Grid
Centered eyebrow-badge header with a responsive grid of lucide-icon feature cards and a primary CTA, grounded in Vandoko agency sprint capabilities.
Single-Focus Sprint Process Feature
Split heading/copy column with an inline terminal visual, followed by a 2×3 benefit grid covering Vandoko's sprint model.
Sprint-Outcome Testimonials
Two-column testimonial section with a heading block and a stack of quote cards, each with an initials avatar and Vandoko sprint-outcome quotes.
Three-Tier Sprint Pricing
Monthly/annual toggle pricing section with three Vandoko sprint plans (Sprint, Scale, Partner), feature lists, and primary/outline CTAs.
Closing CTA Band
A two-panel closing CTA section with headline, dual pill CTAs, and two sub-feature links separated by a divider — voiced as Vandoko agency.
Three-Column Newsletter Footer
Full-width footer with a Vandoko wordmark, three nav link columns, a social icon strip, a newsletter sign-up, and a copyright / legal strip.
Sticky Product Mega-Dropdown Navbar
Warm light editorial sticky navbar with a data-driven Product mega-dropdown, flat nav links, and a sign-in + solid primary CTA pair; collapses to a full-screen drill-down drawer on mobile.
Editorial Outcome Hero
Warm-light editorial hero with an oversized tight-leading headline, dual pill CTAs, a three-column hover feature row, and a crossfading framed product preview with slide dots.
Trusted-By Logo Wall
A trusted-by section with an eyebrow and an even monochrome grid of company wordmarks (lucide glyph + name) rendered in muted foreground with a subtle hover lift — Sana-style, no boxed cards, no external images.
Checklist & Sprint Board Feature
Split layout with eyebrow, oversized heading, checked benefit lines, and a primary CTA beside a framed warm-light sprint-board visual, grounded in Vandoko's sprint model.
Four-Up Sprint Coverage Feature
Compact four-column row of icon + title + short description finishing with an inline link, covering what a Vandoko sprint covers: strategy, design, engineering, launch.
Sprint Pillars Feature Bento
Centered outline-badge header over a bento grid that alternates square photos with rounded text panels, grounded in Vandoko's strategy-design-engineering sprint pillars.
Assembly Testimonial Carousel
Page18 testimonial centerpiece: an oversized tight-leading quote paired with a portrait panel inside a soft rounded-3xl card carousel on a warm muted surface.
Sprint Pricing Switch Carousel
Warm-light pricing section with a monthly/annual switch, three Vandoko sprint tiers (Starter, Growth, Premium) as cards, feature lists, and a masked mobile carousel below the lg breakpoint.
Bold Cyan Color-Block CTA
Page18's single saturated color-block moment: an edge-to-edge cyan band with a centered confident headline, supporting line, and pill CTAs in crisp white-on-cyan contrast. Contra-style flood; static.
Contact Column Footer
Site footer: brand wordmark column with address, phone, email, and social row, plus four nav link columns (Product / Work / Approach / Pricing) and a copyright / legal strip. Warm light editorial surface on bg-muted.
Promo-Pill Hero
Warm-light editorial hero with an oversized tight-leading headline, dual pill CTAs, a three-column hover feature row, and a crossfading framed product preview with slide dots.
Framed Panel Feature Trio
Split layout with eyebrow, oversized heading, checked benefit lines, and a primary CTA beside a framed warm-light sprint-board visual, grounded in Vandoko's sprint model.
Capability List & Sprint Board Feature
Compact four-column row of icon + title + short description finishing with an inline link, covering what a Vandoko sprint covers: strategy, design, engineering, launch.
Sprint-Outcome Testimonial Carousel
Page18 testimonial centerpiece: an oversized tight-leading quote paired with a portrait panel inside a soft rounded-3xl card carousel on a warm muted surface.
Four-Tier Static Sprint Pricing Table
Warm-light pricing section with a monthly/annual switch, three Vandoko sprint tiers (Starter, Growth, Premium) as cards, feature lists, and a masked mobile carousel below the lg breakpoint.
Grouped Mega-Menu Navbar
Sticky navbar with grouped mega-menu dropdowns on desktop and a mobile sheet + accordion drawer, sign-in link + solid primary CTA.
Email Signup Collage Hero
Two-column hero pairing a work-email signup card with an overlapping three-image collage and playful oklch accent marks.
Sprint Walkthrough Feature Tabs
Tabbed feature section walking through a Vandoko sprint (strategy, design, engineering) with a contained media panel, mobile dot nav, and a subtle patterned background.
Sprint-Outcome Quote Grid
Responsive grid of soft-shadow quote cards where founders and product leaders praise Vandoko sprint outcomes, each anchored by a cyan quote mark and an avatar attribution.
Sprint Comparison Pricing Table
Three-tier sprint pricing with plan cards above a feature comparison table, marking included rows with cyan check-circles and highlighting the recommended cadence.
Contained Image Vignette CTA
Contained, framed photo CTA with a centered headline and single primary action, darkened by an oklch radial vignette and one soft primary glow.
Brand Block Newsletter Footer
Airy brand-block footer with an inline Vandoko wordmark, lucide social row, two Vandoko-IA link columns, a pill newsletter sign-up, and a copyright/legal strip.
Editorial Mega-Menu Navbar
A sticky editorial navbar with grouped two-pane mega-menus, a featured tile, flat links, and a mobile accordion overlay.
Editorial Lattice Collage Hero
Split hero with an oversized editorial headline, paired CTAs, and a masonry lattice collage of rounded media tiles on the dark Vandoko canvas.
Double-Row Opposing Marquee
Two continuous rows of partner/client wordmark marks scrolling in opposing directions on a dark editorial canvas, with edge fade masks. No heading, pure-CSS animation.
Centered Feature Link Cards
A centered section header above a grid of rounded media-tile link cards, each with a media image, category eyebrow, title, description, and a visit affordance.
Gallery Carousel
Editorial carousel gallery of shipped studio work — rounded mixed-aspect media tiles with prev/next controls, category eyebrows, and editorial captions. First block in the gallery category.
Studio Roster Contributor Spotlight
Editorial profile-row list of the Vandoko studio/collective: avatar, name, @handle, role, stat, and Follow affordance, with a section header action.
Editorial Avatar Quote Cards
A featured hero quote card plus a supporting card grid; editorial contributor-spotlight DNA with avatar, name, @handle, and role on the dark Vandoko canvas.
Social Editorial Column Footer
Minimal editorial social footer with an inline Vandoko wordmark, a lucide social row, four link columns, a locale switcher, a privacy dialog, a slim newsletter subscribe row, and a copyright strip.
Carousel Feature-Grid Hero
Lead hero with a bold accent-keyword headline, a three-up feature grid, paired CTAs, and a framed product carousel (embla autoplay) with a slide label + dot pager over a single soft cyan glow.
Logo Marquee Trust Strip
Quiet, low-contrast logo marquee scrolling client names beneath the hero — muted grayscale logos on a react-fast-marquee track with edge-fade gradients, no card chrome.
Pattern-Media Checklist Feature
Two-column feature with a tight headline, a cyan-checked capability list and CTA, paired with framed product media on a soft cross-pattern field in a shadowed card surface (media left).
Grid Headline Arrow-Link Feature
Large bold grid headline beside three feature columns, each closing on a lucide arrow link that lights cyan on hover.
Selected Work Feature Cards
Centered-header feature section with three framed image cards showcasing recent Vandoko engagements, each in a soft-shadow rounded surface with an icon chip and a See the work link.
Sliding Testimonial Carousel
Testimonial carousel with rounded soft-shadow quote cards, a big pull-quote, circular avatar, and arrow + dot controls where the active dot is the cyan signal.
Full-Width Image CTA
Full-bleed closing CTA over a full-width image with a foreground scrim and drop-shadowed copy for readable contrast, anchored by a single rounded primary call to action.
Text Social-Link Footer
Quiet site footer with a brand wordmark + positioning line, four link columns, and a bottom rule carrying copyright, labeled text social links (lucide glyphs), and legal links; cyan is the lone hover signal.
Vandoko Grid Tunnel
Perspective SVG terrain grid with vanishing point and cliff drop-off. Pure server-component layer for hero backgrounds — no canvas, no client JS, no animation. Strokes consume var(--border) plus an interpolated oklch lightness ramp for depth.
Dot Spotlight Hero
Interactive dot grid background with mouse-tracking comet trail. Velocity maps color from cyan to azure.
Market Composition Card
Market demographic breakdown with animated counters, mini horizontal bar chart, and segment legend.
Competitor Radar
Spider/radar chart comparing dealer vs competitors across 5+ dimensions with series legend.
Channel KPI Strip
Horizontal row of 6 KPI cards with sparklines, trend arrows, and real-time pulse indicators.
ICP Alignment Gauge
Circular gauge showing ICP alignment score (0-100) per OEM with color-coded threshold bands.
ICP Overview Strip
Full-width glass card with 4 ICP alignment gauges (Overall, Demographic, Vehicle, Behavior) for dealer OEM dashboard header.
Black Hole
Animated canvas black hole with elliptical geometry, particle system, dual cyan+azure mist tendrils, and scanline overlay. Reduced-motion safe; pauses when offscreen.
Glass Card
Glassmorphism card with header, body, and footer sections, animated neon edge shines and glow on hover using vandoko brand accents.
Vandoko Brushed Metal
Signature Vandoko card and background — brushed metal gradient with category badges, metadata footer, compatibility pills, and hover arrow. Includes BrushedMetal primitive and BrushedMetalCard.
Ace Blog 01
Card grid with cover images, author avatars, and truncated descriptions. Responsive 2 or 3 column layout.
Ace Blog 02
Vertical blog list with animated hover background highlight. Minimal layout with date, title, description, and read-more link.
Ace Blog 03
Compact blog list with blur-in entrance animation. Title and date on same row with description below.
Ace Blog 04
Dark-themed card grid with hover border and background shift. Large cover images with author info below.
Ace Blog 05
Blog grid with category pills, horizontal featured card variant, and vertical card grid. Dates and author avatars included.
Ace Blog 06
Image and text list with animated hover background expansion and tag badges. Staggered entrance animation.
Ace Timeline 01
Vertical timeline with cyan gradient line, year markers, and checkmark bullet points.
Ace Timeline 02
Year-grouped timeline with blur-in scroll animation. Each year contains titled entries with optional descriptions.
Ace Timeline 03
Work history timeline with date, company, role title, description, and responsibility checklist.
Ace CTA 01
Centered CTA with dark gradient card and noise texture overlay. Large heading with button.
Ace CTA 02
Centered CTA with dark card and fading grid background overlay. Outline button style.
Ace CTA 03
Split layout CTA with text and description left, button right. Optional avatar social proof.
Ace CTA 04
Minimal email capture CTA with rounded input and inline gradient button.
Ace CTA 05
Centered CTA with rounded dark card, grid background, and prominent primary button.
Ace Footer 04
Centered footer with logo, nav links, copyright, and social icons. Compact single-column layout.
Ace Footer 05
Three-column footer with primary color tinted background. Logo left, link columns right.
Ace Footer 06
Multi-column footer with newsletter email signup, perspective grid background, social icons, and legal links.
Ace Footer 07
Dark 4-column footer with social icon circles, gradient accent line at top, and section dividers.
Ace Footer 08
4-column footer with large gradient background text watermark. Logo, columns, and copyright.
Ace Pricing 04
3-tier pricing cards with highlighted featured tier gradient and checkmark feature lists.
Ace Pricing 05
3-tier pricing with monthly/yearly toggle, arrow-circle feature icons, and highlighted plan.
Ace Pricing 06
Side-by-side stacked pricing cards with 2-column layout. Features list with check icons.
Ace Contact 03
Minimal 3-field contact form with name, email, and message. Lightweight state management.
Ace Contact 04
Two-column contact: info panel left with dark form and grid background right. 4 fields.
Ace Contact 05
Labeled contact form with validation callbacks and subtle shadow styling. 3 fields.
Ace FAQ 03
Accordion FAQ with rotating plus icon and spring-animated height transitions.
Ace FAQ 04
Dark FAQ accordion with animated rotating arrow icon and divider lines between items.
Ace Hero 06
Animated hero with top badge, large heading, dual CTAs (primary + text link), and bordered image showcase.
Ace Hero 07
Clean minimal hero with large heading, optional subtitle, description, dual buttons, and gradient divider.
Ace Logo Cloud 02
Grid logo cloud with stagger blur-in animation triggered on scroll. 2x3 mobile, 3 cols desktop.
Ace Logo Cloud 03
Auto-rotating logo grid that swaps random logos every 3 seconds. Bordered cells with hover background.
About Hero Image
About Hero Image component from SCB batch decomposition.
About Hero Stats
Tailwind col-span class, e.g. "sm:col-span-5"
About Intro Stats
About Intro Stats component from SCB batch decomposition.
About Story Stats
Story + image */}
Animated Text Reveal
Animated Text Reveal component from SCB batch decomposition.
Articles List
Articles List component from SCB batch decomposition.
Benefits Showcase
For inside-card variant: author name
Case Study Carousel
Optional overlay node rendered centered on the image (logo, wordmark, etc.)
Code Snippet Viewer
Mobile: Select */}
Contact Split
Header */}
Cta Pricing
Cta Pricing component from SCB batch decomposition.
Dashboard Showcase
Dashboard Showcase component from SCB batch decomposition.
Experience Skills
Experience Skills component from SCB batch decomposition.
Faq Page Categorized
Sticky sidebar */}
Feature Highlight Split
Feature Highlight Split component from SCB batch decomposition.
Features Accordion
Features Accordion component from SCB batch decomposition.
Features Alternating
Header */}
Features Bento
Features Bento component from SCB batch decomposition.
Features Bento Mixed
'fill' uses next/image fill mode in CardContent, otherwise fixed width/height
Features Col Image
Bottom spacer */}
Features Icon Carousel
Left: heading + icon grid + dots */}
Features Quad Selector
Exactly 4 feature image paths (one per tab, shown in the center panel)
Features Showcase
Desktop tabs */}
Features Stats
Features Stats component from SCB batch decomposition.
Features Tabs Gradient
Section header */}
Features Tabs Icon List
Path to SVG used as CSS mask — monochrome, any color
Features Tabs Split
Left: Text & Tabs */}
Features Tabs Vertical
Features Tabs Vertical component from SCB batch decomposition.
Gallery Vertical Carousel
Gradient overlay */}
Hero Carousel
Left — content */}
Hero Diagonal
Top row: side panels + headline */}
Hero Observability
Mock terminal log visualization */}
Hero Personal
Hero Personal component from SCB batch decomposition.
Hero Product Screenshot
Fade-in content via CSS animation */}
Hero Tabs
Hero Tabs component from SCB batch decomposition.
Hero Video
Hero Video component from SCB batch decomposition.
History Stats
Left: overline, title, paragraphs, stat cards */}
Image Overlay Cta
Image Overlay Cta component from SCB batch decomposition.
Integrations Cards
URL to icon/logo image (floats above the card)
Integrations Directory
Sidebar category nav */}
Integrations Grid
URL to icon/logo image
Job Openings List
bottom border */}
Jobs List
Jobs List component from SCB batch decomposition.
Logs Showcase
Logs Showcase component from SCB batch decomposition.
Mission Statement
"divider" shows a bottom rule; "no-divider" omits it
Open Positions
Open Positions component from SCB batch decomposition.
Page Hero
Page Hero component from SCB batch decomposition.
Perks Split
Left: image with accent tail */}
Press Mentions
Press Mentions component from SCB batch decomposition.
Pricing Comparison
Plan headers */}
Pricing Table
Index of the highlighted/featured plan (default: 1)
Pricing Three Col
Header */}
Process Hover
Process Hover component from SCB batch decomposition.
Project Gallery
Project Gallery component from SCB batch decomposition.
Project Overview
Project Overview component from SCB batch decomposition.
Roadmap Section
Roadmap Section component from SCB batch decomposition.
Service Card Grid
Service Card Grid component from SCB batch decomposition.
Service Deliverables
Service Deliverables component from SCB batch decomposition.
Services Icon Grid
Services Icon Grid component from SCB batch decomposition.
Split Section
Split Section component from SCB batch decomposition.
Team Carousel
Team Carousel component from SCB batch decomposition.
Testimonials Company Tags
Topic/industry tag pills shown below the quote
Testimonials Logo Cards
Header */}
Testimonials Photo Carousel
Testimonials Photo Carousel component from SCB batch decomposition.
Testimonials Side Marquee
Left: text block */}
Timeline Alternating
Desktop text side */}
Values Icon Cards
Values Icon Cards component from SCB batch decomposition.
Values Icon List
Header */}
Video About Section
Video */}
World Map Section
Slot for WorldMap — pass dots via props */}
Ace Banner
Fixed top banner with promotional message and gradient CTA link
Ace Book A Call
Email input with inline book-a-call CTA button and optional powered-by text
Ace Clients
Client logo marquee strip with auto-scrolling and grayscale logos
Ace Collage
Absolute-positioned rotated image collage with hover-to-front interaction
Ace Contact Form
Simple contact form with name, email, and message fields with submit handler
Ace Contact
Two-column contact section with form fields and heading/description
Ace Cta
Centered call-to-action section with heading, body text, and action button
Ace Experiences
Experience timeline list with company, role, period, and description
Ace Faq
Single FAQ accordion with expand/collapse toggle and answer panel
Ace Faqs
Multi-item FAQ section with collapsible question/answer pairs
Ace Information Block
Animated information block with motion/react fade and slide transitions
Ace Landing Images
Animated landing page image grid with motion/react stagger and parallax
Ace Map Section
Map section placeholder with heading and description for location display
Ace Outcomes
Outcomes section with metrics and landing images showcase
Ace Security
Security features section with trust badges and compliance highlights
Ace Speed
Speed/performance section with metrics and landing images visualization
Ace Stack Item
Animated tech stack item card with motion/react hover and entrance effects
Ace Use Cases
Animated use cases section with motion/react transitions between scenarios
Ace Content Card
Reusable content card with icon, title, and description for feature grids
Ace Feature Card
Individual feature card with icon, heading, and body text
Ace Features Bento
Bento grid layout for features with asymmetric card sizing
Ace Features Cards
Animated feature cards with motion/react entrance and hover effects
Ace Features Grid
Responsive feature card grid with icon, title, and description per item
Ace Grid Features
Feature grid with lucide-react icons, title, and description per cell
Ace Grid
Generic responsive grid layout for arranging feature or content items
Ace Grids
Multi-grid section composing content cards into grouped layouts
Ace Social Card
Social media preview card with platform icon, handle, and content snippet
Ace Hero Animated
Animated hero section with CSS keyframe effects and gradient headline
Ace Hero Features
Hero section with lucide-react feature icons, headline, and CTA buttons
Ace Pricing Grid
Pricing tier grid with plan name, price, feature list, and CTA per card
Ace Pricing Table
Feature comparison pricing table with plan columns and check/cross indicators
Ace Pricing
Pricing cards with lucide-react check icons, plan details, and action buttons
Ace Ambient Color
Ambient color glow effect primitive with configurable hue and blur radius
Ace Beam
Decorative beam/ray primitive with gradient line and glow effect
Ace Button
Styled button primitive with gradient background and hover state
Ace Card Pattern
Card with animated motion/react gradient pattern that follows cursor
Ace Container
Max-width centered container primitive with responsive padding
Ace Feature Icon Container
Icon container primitive with border and background for feature icons
Ace Footer
Site footer with navigation columns, social links, and copyright bar
Ace Gradient Divider
Horizontal gradient divider line with configurable color stops
Ace Grid Lines
Decorative grid lines background overlay with configurable spacing
Ace Grid Pattern
SVG-based grid dot pattern background with configurable density
Ace Header
Site header with logo, navigation links, and optional CTA button
Ace Heading
Typography heading primitive with size variants and gradient text support
Ace Horizontal Gradient
Horizontal gradient bar primitive with configurable direction and colors
Ace Icon Box Hero
Hero-sized icon box with border, background, and centered icon slot
Ace Icon Container
Compact icon container with configurable size and background style
Ace Logo Cloud
Logo cloud with motion/react animated entrance and hover scale effects
Ace Logo With Text
Logo mark paired with brand text for header and footer usage
Ace Logo
Standalone logo mark primitive with configurable size and color
Ace Navbar Item
Individual navbar link item with active state indicator
Ace Navbar
Responsive navbar with motion/react animated mobile menu and dropdown support
Ace Section Heading
Section heading primitive with motion/react fade-in and optional eyebrow text
Ace Subheading
Subheading typography primitive with muted color and configurable size
Ace About
About section with motion/react animated team photo grid and company narrative
Ace Featured Testimonials
Featured testimonial cards with large pull quote and author attribution
Ace Feedbacks
Feedback cards with motion/react animated entrance and star ratings
Ace Testimonial Column
Vertical testimonial column for masonry-style testimonial layouts
Ace Testimonial
Single testimonial card with avatar, name, role, and quote text
Ace Testimonials
Auto-scrolling testimonial marquee with react-fast-marquee and avatar cards
Hero Saas
SaaS hero section with gradient headline, dual CTA buttons, and social proof strip
Hero Agency
Agency/portfolio hero with headline, dual CTAs, optional project card grid
Hero Animated
Animated hero with CSS-only radial glow, concentric rings, and fade-in stagger
Pricing Cards
Pricing tiers with monthly/annual toggle, feature checklist, popular badge
Pricing Toggle
Monthly/annual toggle pricing table with feature comparison grid
Logo Cloud
Client logo strip with static grid or CSS marquee scroll, optional rows and href support
Footer Marketing
Marketing footer with brand column, nav columns, social links, and legal bar
Stats Bar
Key metrics bar with prefix/suffix support — horizontal strip or card-grid variants
Testimonial Carousel
Auto-rotating testimonial cards with avatar, role, company, and star rating
Testimonials Grid
Testimonial grid with optional featured quote, avatar, star rating
Testimonials Marquee
Auto-scrolling testimonial marquee in two rows, hover to pause, CSS-only animation
Features Grid
Feature cards grid with icon or image support — grid/bento/icon-left variants
Features Tabs
Tabbed features section with description and optional image per tab
Faq Accordion
FAQ section with collapsible accordion — single column or two-column variants
Cta Banner
Full-width CTA banner on primary background — centered/split/with-avatars variants
Contact Form
Contact form with name, email, message fields — simple or sidebar layout variants
Blog Grid
Blog post card grid with cover image, category badge, author avatar, and date
Team Cards
Team member cards with avatar, role, bio, and LinkedIn/Twitter links
Process Steps
Numbered process steps with step counter — grid or vertical list layout
SCB Hero 02
Badge + heading + two-column hero with image
SCB Hero 03
Bold heading with side image hero
SCB Hero 04
Centered heading with reviews and avatars hero
SCB Hero 05
Centered hero with grid pattern background and logo bar
Ace Hero 02
Scrolling parallax product showcase
Ace Hero 03
Conic gradient lamp effect with animated glow
Ace Hero 04
Animated spotlight SVG effect
Ace Hero 05
3D scroll animation with rotating card
SCB Card 01
Interactive case study gallery with expanding cards on hover, featuring company logos and badges
SCB Card 02
Blog post card grid with category filter dropdowns, image thumbnails, and badge labels
SCB Card 03
Team member avatar grid with customizable names, roles, and profile images
SCB Card 04
Platform stats counter grid with large numbers and descriptive labels
SCB Card 05
Partner logo strip with grayscale logos and descriptive text
Ace Card 01
3D card with mouse-tracking tilt perspective effect using context-based depth layers
Ace Card 02
Wobble hover effect card with physics-based mouse tracking and noise texture overlay
Ace Card 03
Holographic glare card with rainbow foil effect and 3D rotation on pointer move
Ace Card 04
Focus card grid where non-hovered cards blur and scale down to highlight the active card
Ace Card 05
Animated hover effect card grid with sliding highlight background using Framer Motion
SCB Footer 02
Full footer with logo, app store links, nav columns, social icons, and legal section
SCB Footer 03
Grid footer with social media icons, mobile app section, and bordered bottom
SCB Footer 04
Configurable footer with logo, description, social links, nav sections, and legal links
SCB Footer 05
CTA footer with free pricing card, five-column nav grid, and social follow buttons
Ace Footer 01
Animated floating dock with spring physics, mouse-tracking icon scaling, and tooltip labels
Ace Footer 02
Staggered text reveal animation with blur-to-clear word transitions
Ace Footer 03
Character-by-character typewriter animation with blinking cursor
MGU Footer 01
Newsletter footer with responsive logo, social icons, nav columns, and email subscribe form
ORG Footer 01
Minimal clean footer with sitemap grid, bordered logo section, and legal links
SCB Background 01
Dismissible notification banner with close button, title, description, and link
SCB Background 02
Long-form content section with sidebar table of contents, timeline steps, data table, and alert
SCB Background 03
Process steps section with sticky sidebar heading, numbered step cards, and decorative illustration
SCB Background 04
Horizontal scrolling carousel gallery with navigation arrows, badge labels, and card items
SCB Background 05
Contact page with CTA buttons, support channels grid, and global offices directory
Ace Background 01
Animated aurora borealis background effect with gradient overlays and mask
Ace Background 02
Animated light beam SVG background with gradient-traced paths using Framer Motion
Ace Background 03
Canvas-based animated wavy background with simplex noise generation
Ace Background 04
Interactive animated gradient background with configurable colors and mouse-tracking pointer blob
Ace Background 05
Animated particle sparkles background using tsparticles with configurable density, size, and color
SCB Testimonial 02
Centered testimonial quote with company logo
SCB Testimonial 03
Testimonial grid with hero image and avatar cards
SCB Testimonial 04
Auto-scrolling dual testimonial carousel
SCB Testimonial 05
Masonry grid testimonial wall with social icons
Ace Testimonial 01
Animated testimonial carousel with stacked image transitions
Ace Testimonial 02
Infinite horizontal scrolling testimonial cards
Ace Testimonial 03
Stacked card carousel with auto-flip animation
Ace Testimonial 04
3D perspective marquee grid with animated columns
Ace Testimonial 05
Testimonial carousel with avatar cards and navigation
SCB Feature 02
Two-column feature section with image and CTA buttons
SCB Feature 03
Card-based training platform feature section with hover effects
SCB Feature 04
Feature carousel with progress indicator and icon cards
SCB Feature 05
Three-column values grid with icon cards
Ace Feature 01
Responsive bento grid layout for feature showcases
Ace Feature 02
Sticky scroll reveal with animated background transitions
Ace Feature 03
Animated tracing beam with scroll-linked gradient SVG
Ace Feature 04
Animated timeline with scroll-linked progress indicator
Ace Feature 05
Animated tabs with 3D stacked content panels
SCB Button 01
Simple login form with email and password inputs
SCB Button 02
Login form with logo header and labeled inputs
SCB Button 03
Login form with social authentication providers
SCB Button 04
Signup form with email, password, and confirm password
SCB Button 05
Signup form with social authentication using react-icons
Ace Button 01
Animated moving border button with SVG path animation
Ace Button 02
Button with rotating gradient border on hover
Ace Button 03
Stateful button with loading spinner and success check animation
Ace Button 04
Button showcase card container with dot background pattern
MGU Button 01
Shimmer button with animated conic gradient border effect
Ace Hero 01
A hero section with interactive dot pattern background and animated text highlighting. Perfect for dealer landing pages.
SCB Hero 01
Two-column hero section with social proof, star ratings, and overlapping avatars.
SCB Feature 01
Multi-card feature section with collaboration theme, testimonial quote, and large imagery.
SCB Pricing 01
Three-tier pricing section with monthly/yearly toggle, popular badge, and feature lists.
SCB Testimonial 01
Masonry grid testimonials with carousel on mobile, avatars, and CTA buttons.
SCB CTA 01
Two-column CTA section with info cards, dual action buttons, and documentation links.
SCB FAQ 01
Column-style FAQ with all answers visible, bordered separators, and clean typography.
SCB Footer 01
Full-featured footer with logo, navigation columns, newsletter signup, and legal links.
What members receive
01 · Token
A bearer token, refreshed concierge.
02 · Install
Direct access via shadcn CLI under @vandoko.
03 · Lineage
Every component traces to its source, license, and curator.
What the token unlocks
{
"registries": {
"@vandoko": {
"url": "https://registry.vandoko.com/r/{name}.json",
"headers": {
"Authorization": "Bearer ${VANDOKO_REGISTRY_TOKEN}"
}
}
}
}