All elements

Preview any component on its own page, then install it from your site folder:

Copyjprot add ComponentName

Hero sections

AvatarHero→ avatar in a gradient ring with title, subtitle and social links. heroavatarpersonal BadgeHero→ headline with a pulsing status pill above it. herobadgestatus CenteredHero→ big centered headline, subtitle and two buttons. herocenteredlanding CoverHero→ full-bleed image background with a centered overlay panel. herocoverlanding SplitHero→ two-column hero: headline on the left, image on the right. herosplitlanding TerminalHero→ a fake terminal card beside the headline, great for dev tools. heroterminalcode

Buttons

ButtonGroup→ stacked row of mixed primary/outline buttons from `items`. buttonsgrouprow OutlineButton→ ghost button with a border; pairs well with PrimaryButton. buttonghostoutline PrimaryButton→ bold accent button with a few sizes. buttonctaprimary ShadowButton→ soft neon shadow, made for dark or colorful backdrops. buttonglowneon

Badges

FeatureChip→ icon + label feature highlight used in pricing or specs. chipfeaturespec StatusBadge→ dot + label state pill for services, uptime or availability. badgestatusdot TagPill→ small removable-style keyword chip. tagpillchip VersionBadge→ monospace version tag, ideal for changelogs and releases. badgeversionchangelog

Cards

Stats

CounterTiles→ tiled metric blocks that pop on dark or accent backdrops. statstilesmetric DotGrid→ dot-matrix value grid (shares, milestones, leaders). statsdotsgrid SkillBars→ animated-looking proficiency bars per skill. skillsbarsprogress StatsBand→ a flush horizontal band of big numbers. statsnumbersband StatsInline→ compact inline numbers joined by thin separators. statsinlinecompact

Forms

ContactCard→ name + email + message form on a surface card. contactformmessage EmailCapture→ header-like hero-lite: headline with an input underneath. emailcapturehero NewsletterBox→ standalone subscribe card with a pitch and success hint. newsletteremailcard NewsletterStrip→ slim email capture row, fits inside a footer or under text. newsletteremailsubscribe SubscribeBanner→ full-width accent banner asking for subscribers. subscribebannercta

Media

AvatarStack→ overlapping avatars with a "+N" overflow count. avatarsfacessocial proof BeforeAfter→ side-by-side comparison with a center divider. mediabeforeafter MediaVideo→ thumbnail with a play button that swaps in the embed. videoembedplay PhotoGallery→ responsive image grid with lazy loading and hover zoom. galleryphotosgrid PhotoStack→ overlapping layers of photos, one poking behind the other. mediaphotosstack

Testimonials

LogoWall→ quietly fading grid of client/brand names. logosbrandsclients QuoteBlock→ big centered pull-quote with star rating above. quotetestimonialstar ReviewStars→ just the stars plus a numeric score, for app-store rows. ratingstarsapp-store TestimonialGrid→ masonry-ish grid of short quotes at different heights. testimonialsgridquotes

Process

Roadmap→ status-tagged milestones: done, building, planned. roadmapmilestonestatus StepsHorizontal→ flat numbered row for 2-4 stage processes. stepsprocesshorizontal StepsVertical→ vertical numbered steps with a connecting line. stepsprocesshow-it-works Timeline→ dated events down the page, current one highlighted. timelinehistorydates

Call-to-action

CtaBanner→ headline + button on a soft accent panel. ctabannercall-to-action CtaGradient→ colorful gradient card with big centered prompt. ctagradientprompt CtaSplit→ big left-aligned CTA with supporting buttons on the right. ctasplitcall-to-action DownloadCard→ fake file card with a download button. downloadfileget RegisterCard→ event/app registration mini-card with date + button. registereventsignup

Chrome & navigation

AlertBar→ slim dismissible banner for launches or maintenance. alertbannerannouncement BackToTop→ smooth-scroll button pinned to the viewport corner. back-to-topscrollbutton Breadcrumbs→ "Home / Docs / Page" trail with separators. navcrumbspath CookieBanner→ bottom consent bar that hides once dismissed. cookieconsentbanner Pagination→ prev / numbered / next row. paginationpagespager ShareRow→ share buttons triggering the native share sheet. sharesocialbuttons TagsFilter→ clickable tag chips that filter a client-side grid. filtertagschips TocList→ table of contents with jump links for on-page anchors. toccontentsanchors

Content blocks

CodeBlock→ terminal-style code window with copy button. codeterminalcopy DefList→ term/definition pairs for glossaries and specs. definitionsglossaryspecs FaqAccordion→ accessible details/summary accordion, no JS required. faqaccordionquestions HintList→ numbered "do this first" tips for tutorials and onboarding. tipshintsonboarding StripedTable→ zebra-striped responsive table. tabledatarows