design-infraNavbar
Marketing navigation with a mobile menu
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/navbarTwenty useful starting points
Twenty free, theme-aware starting points for marketing, product and AI UI. Verify compatibility in your own project. Open the demos, choose a part, then ask your agent to adapt it to your project.
Installation, build and browser checks passed
Checked 2026-10-16. Next.js 16 / React 19 / Tailwind 4 consumer fixture; system Chrome gallery checks at 390px and 1280px.
View checks and compatibility limits
Checks: all 20 registry installs in a fresh project; consumer Next.js production build; legacy @oc install; 280 desktop/mobile previews across every design system and available mode; no browser exceptions or horizontal overflow; no continuous animation under reduced motion; keyboard: mobile navigation, FAQ, pricing switch, settings edit and prompt submission.
Not an exhaustive accessibility audit or cross-browser certification. Gallery demos and one fixture do not prove compatibility with every project's props, content or dependency versions.
Hero · Split
Clear headline, actions and a supporting visual
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/hero-splitHero · Spotlight
Centered hero with a static light treatment
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/hero-spotlightFeatures · Bento
Features with different visual emphasis
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/feature-bentoFeatures · List
Readable product features without heavy effects
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/feature-listFeatures · Levels (scroll-spy)
Progressive feature story with tiers
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/feature-levelsPricing · Simple
Pricing cards with monthly/yearly selection
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/pricing-simpleLogo cloud
Customer or integration logos
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/logo-cloudStats row
Marketing metrics
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/stats-rowTestimonials · Grid
Customer quotes
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/testimonials-gridFAQ
Keyboard-operable questions and answers
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/faqCTA banner
A focused final action
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/cta-bannerFooter · Columns
Grouped footer links
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/footer-columnsEmpty state
A useful next action when a view has no content
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/empty-stateStat cards
Dashboard metric cards
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/stat-cardsData table card
A composed data-table surface
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/data-table-cardSettings form
Editable settings with save/reset states
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/settings-formChat thread
Conversation content and message states
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/chat-threadPrompt composer
A prompt input with controls
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/prompt-composerAgent status
Agent progress and status
Open live demo$
Share how it workednpx shadcn@latest add @design-infra/agent-statusNew here? Connect your project and try the three pilot tasks. Existing project tokens come first; theme installation is optional.