@facade

Accessible sections and page templates for marketing websites: heroes, feature grids, pricing tables, FAQs and footers. Built with Base UI and Tailwind CSS v4.

135 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://facadeui.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://facadeui.dev/r/registry.json

bun bunx shadcn@latest add https://facadeui.dev/r/registry.json

fetch registry curl -s https://facadeui.dev/r/registry.json

Components

135 total

Design tokens file

The design tokens Facade UI needs: shadcn colour names, plus --facade-* variables for heading sizes, section spacing and animation. The default colours are Tai…

npx shadcn@latest add https://facadeui.dev/r/tokens.json

Theme presets file

Three more colour themes: neutral, warm and vivid. Apply one with the data-facade-theme attribute. The default orange theme is in the tokens file.

npx shadcn@latest add https://facadeui.dev/r/themes.json

cn lib

A helper that merges class names, using clsx and tailwind-merge. It is the same as the one in shadcn/ui, so installing it changes nothing if you already have i…

npx shadcn@latest add https://facadeui.dev/r/utils.json

Shared types lib

Types that every section uses: heading levels, image and link components you can replace, and call-to-action items.

npx shadcn@latest add https://facadeui.dev/r/types.json

Motion primitives component

Animation building blocks: FacadeMotionProvider, FadeIn, Reveal, Stagger and Collapse. They animate only opacity and transform, and follow the reduced-motion s…

npx shadcn@latest add https://facadeui.dev/r/motion-primitives.json

Button ui

A button built on Base UI, with Facade styles. Every size is at least 44 by 44 pixels.

npx shadcn@latest add https://facadeui.dev/r/button.json

Badge ui

A small label for a status or category. You can add a prefix that only screen readers announce.

npx shadcn@latest add https://facadeui.dev/r/badge.json

Heading ui

Renders an h1 to h6 from a number, so you set the heading level and the visual size separately.

npx shadcn@latest add https://facadeui.dev/r/heading.json

Eyebrow ui

The small label above a section heading. It is a paragraph, not a heading.

npx shadcn@latest add https://facadeui.dev/r/eyebrow.json

Container ui

Sets the maximum width and side padding that every section uses. Both come from the container tokens.

npx shadcn@latest add https://facadeui.dev/r/container.json

Section ui

The outer wrapper of a section. It sets the element, the vertical spacing, and the link to the heading that names the section.

npx shadcn@latest add https://facadeui.dev/r/section.json

Section header ui

An eyebrow, a heading and a description. It also sets the heading id that a section uses for its accessible name.

npx shadcn@latest add https://facadeui.dev/r/section-header.json

CTA group ui

A row of call-to-action links styled as buttons. Because they are links, people can open them in a new tab.

npx shadcn@latest add https://facadeui.dev/r/cta-group.json

Stat ui

One number with its label, as part of a description list. You can give a spoken form for abbreviated values.

npx shadcn@latest add https://facadeui.dev/r/stat.json

Logo mark ui

One customer logo, with an optional link. Logos get the same visual height, and the company name is available to screen readers.

npx shadcn@latest add https://facadeui.dev/r/logo-mark.json

Feature icon ui

A tinted box that holds an icon. You pass an icon component, and it is hidden from screen readers.

npx shadcn@latest add https://facadeui.dev/r/feature-icon.json

Testimonial ui

A quote with the name of the person who said it, and an optional star rating that screen readers announce as text.

npx shadcn@latest add https://facadeui.dev/r/testimonial.json

Pricing tier ui

One pricing plan as a card. The price has a spoken form, a feature that is not included says so in words, and you can mark a plan as recommended.

npx shadcn@latest add https://facadeui.dev/r/pricing-tier.json

Input ui

A text field built on Base UI's Field, which connects the label, help text and error message to the input. The border has a contrast of at least 3:1.

npx shadcn@latest add https://facadeui.dev/r/input.json

Select ui

A drop-down list built on Base UI's Select and Field. The label, help text and error message are connected to the control, and a hidden input carries the chose…

npx shadcn@latest add https://facadeui.dev/r/select.json

Textarea ui

A multi-line text field built on Base UI's Field, so the label, help text and error message are connected to the control. Same border and focus ring as Input.

npx shadcn@latest add https://facadeui.dev/r/textarea.json

Prose ui

Styles for an article body: headings, paragraphs, lists, links, code, quotes and tables on the Facade type scale. Wrap rendered markdown or hand-written HTML i…

npx shadcn@latest add https://facadeui.dev/r/prose.json

Top navigation block

A site header and navigation bar built from one list of links. Large screens get dropdown menus. Small screens get a drawer that keeps keyboard focus inside it.

npx shadcn@latest add https://facadeui.dev/r/nav-top.json

Hero — centred block

A centred landing page hero: eyebrow, headline, text and buttons, with optional media below.

npx shadcn@latest add https://facadeui.dev/r/hero-centered.json

Hero — centred (motion) block

The centred hero, with its parts appearing one after another when the page loads.

npx shadcn@latest add https://facadeui.dev/r/hero-centered-motion.json

Hero — split block

A landing page hero with text on one side and media on the other. The text comes first in reading order on every screen size.

npx shadcn@latest add https://facadeui.dev/r/hero-split.json

Hero — split (motion) block

The split hero, with its parts appearing one after another when the page loads.

npx shadcn@latest add https://facadeui.dev/r/hero-split-motion.json

Hero — with media block

A landing page hero with centred text over a full-width background image, or above a framed screenshot. Over a background, a dark layer keeps the text readable.

npx shadcn@latest add https://facadeui.dev/r/hero-with-media.json

Hero — with media (motion) block

The media hero, with its parts appearing one after another when the page loads.

npx shadcn@latest add https://facadeui.dev/r/hero-with-media-motion.json

Logo cloud block

A "trusted by" row of customer logos. Company names are available as text, so screen readers announce a list of names, not unlabelled images.

npx shadcn@latest add https://facadeui.dev/r/logo-cloud.json

Logo cloud (motion) block

The logo cloud, with logos fading in one after another.

npx shadcn@latest add https://facadeui.dev/r/logo-cloud-motion.json

USP list block

Three or four short selling points or benefits, each with an icon and a line of text.

npx shadcn@latest add https://facadeui.dev/r/usp-list.json

USP list (motion) block

The USP list, with items appearing one after another.

npx shadcn@latest add https://facadeui.dev/r/usp-list-motion.json

Feature grid block

A features section: a grid of feature cards, two to four per row. A whole card can be a link while its accessible name stays short.

npx shadcn@latest add https://facadeui.dev/r/feature-grid.json

Feature grid (motion) block

The feature grid, with cards appearing one after another.

npx shadcn@latest add https://facadeui.dev/r/feature-grid-motion.json

Feature rows block

Rows of media and text that alternate sides. Only the layout alternates: in reading order, the text always comes first.

npx shadcn@latest add https://facadeui.dev/r/feature-rows.json

Feature rows (motion) block

The feature rows, each appearing as you scroll to it.

npx shadcn@latest add https://facadeui.dev/r/feature-rows-motion.json

Bento grid block

Feature tiles in mixed sizes. Tiles are placed in the order you give, so reading order matches what you see.

npx shadcn@latest add https://facadeui.dev/r/bento-grid.json

Bento grid (motion) block

The bento grid, with tiles appearing one after another.

npx shadcn@latest add https://facadeui.dev/r/bento-grid-motion.json

FAQ accordion block

A FAQ section: questions and answers built on Base UI's Accordion. Each question is a button inside a heading, browser search finds text in closed answers, and…

npx shadcn@latest add https://facadeui.dev/r/faq-accordion.json

FAQ accordion (motion) block

The FAQ accordion, with rows appearing as you scroll to them. The open and close animation works without JavaScript.

npx shadcn@latest add https://facadeui.dev/r/faq-accordion-motion.json

CTA band block

A closing call to action band. Choose a muted, card, plain or primary-coloured background.

npx shadcn@latest add https://facadeui.dev/r/cta-band.json

CTA band (motion) block

The CTA band, appearing as you scroll to it.

npx shadcn@latest add https://facadeui.dev/r/cta-band-motion.json

Footer block

A site footer with link groups in columns, a brand area, social links and a legal line. Each link group is a separately named navigation landmark.

npx shadcn@latest add https://facadeui.dev/r/footer.json

Stats block

A row of key numbers or metrics as a description list. You can give a spoken form for abbreviated values.

npx shadcn@latest add https://facadeui.dev/r/stats.json

Stats (motion) block

The stats, with numbers appearing one after another as you scroll to them.

npx shadcn@latest add https://facadeui.dev/r/stats-motion.json

Testimonials grid block

A social proof section: a grid of customer quotes and reviews. It can use columns of uneven height and still be read in the order you give.

npx shadcn@latest add https://facadeui.dev/r/testimonials-grid.json

Testimonials grid (motion) block

The testimonials grid, with quotes appearing one after another as you scroll to it.

npx shadcn@latest add https://facadeui.dev/r/testimonials-grid-motion.json

Testimonial — single block

One large customer quote, with an optional portrait beside it or a tinted background.

npx shadcn@latest add https://facadeui.dev/r/testimonial-single.json

Pricing tiers block

A pricing table: plans as a row of cards. Each price has a spoken form, and a feature that is not included says so in words.

npx shadcn@latest add https://facadeui.dev/r/pricing-tiers.json

Pricing tiers (motion) block

The pricing tiers, with plans appearing one after another as you scroll to them.

npx shadcn@latest add https://facadeui.dev/r/pricing-tiers-motion.json

Pricing comparison block

A pricing comparison table with row and column headers. Each cell states its value in text, not only with a tick.

npx shadcn@latest add https://facadeui.dev/r/pricing-comparison.json

Card list block

A grid of linked cards for blog posts, changelog entries or case studies. Dates are marked up so that software can read them.

npx shadcn@latest add https://facadeui.dev/r/card-list.json

Card list (motion) block

The card list, with cards appearing one after another as you scroll to it.

npx shadcn@latest add https://facadeui.dev/r/card-list-motion.json

Feature tabs block

Features shown in tabs, built on Base UI. A tab opens when you press Enter, not when you move to it with the arrow keys.

npx shadcn@latest add https://facadeui.dev/r/feature-tabs.json

Steps block

A "how it works" sequence as an ordered list, so the order is in the markup and not only in the visible numbers.

npx shadcn@latest add https://facadeui.dev/r/steps.json

Steps (motion) block

The steps, appearing in order. Here the order of the animation matches the meaning.

npx shadcn@latest add https://facadeui.dev/r/steps-motion.json

Team block

An "about us" team section. Each social link names the person as well as the network.

npx shadcn@latest add https://facadeui.dev/r/team.json

Team (motion) block

The team grid, with people appearing one after another as you scroll to it.

npx shadcn@latest add https://facadeui.dev/r/team-motion.json

Newsletter block

An email sign-up (newsletter subscribe) form. It announces the result to screen readers through a live region that is on the page from the start.

npx shadcn@latest add https://facadeui.dev/r/newsletter.json

Banner block

An announcement bar at the top of the page that people can dismiss. It is a named landmark, and it is announced to screen readers only if you turn that on.

npx shadcn@latest add https://facadeui.dev/r/banner.json

Side navigation block

Side navigation for documentation, with collapsible groups and one named landmark. On small screens it becomes a drawer.

npx shadcn@latest add https://facadeui.dev/r/nav-side.json

Changelog list block

A list of releases. Each has a version, a date and its changes, labelled Added, Changed, Fixed, Removed, Deprecated or Security. Every release is its own artic…

npx shadcn@latest add https://facadeui.dev/r/changelog-list.json

Contact form block

A contact form built from Input, Select and Textarea, with your contact details beside it. It checks required fields, shows errors from your server on the righ…

npx shadcn@latest add https://facadeui.dev/r/contact-form.json

SaaS landing page block

A complete SaaS landing page built from Facade UI sections. You supply one content object.

npx shadcn@latest add https://facadeui.dev/r/saas-landing.json

Agency site block

An agency or studio website: a hero over an image, a grid of work, process steps, a featured quote and the team.

npx shadcn@latest add https://facadeui.dev/r/agency.json

Product launch block

A product launch landing page: an announcement banner, a bento grid of highlights, details in tabs and an email sign-up.

npx shadcn@latest add https://facadeui.dev/r/product-launch.json

Changelog page block

A complete changelog page built from Facade UI sections: a header, the releases with their changes, and an optional email sign-up. You supply one content objec…

npx shadcn@latest add https://facadeui.dev/r/changelog.json

Documentation page block

A documentation page built from Facade UI sections: top navigation, side navigation, the article, an 'On this page' list and previous and next links. You suppl…

npx shadcn@latest add https://facadeui.dev/r/docs-site.json

Example content component

Sample content and placeholders shared by the Facade UI examples. Installed with any *-demo item.

npx shadcn@latest add https://facadeui.dev/r/examples-content.json

Agency site example component

Usage example (demo) for Agency site: the code behind the preview on https://facadeui.dev/components/agency. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/agency-demo.json

Badge example component

Usage example (demo) for Badge: the code behind the preview on https://facadeui.dev/components/badge. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/badge-demo.json

Banner example component

Usage example (demo) for Banner: the code behind the preview on https://facadeui.dev/components/banner. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/banner-demo.json

Bento grid (motion) example component

Usage example (demo) for Bento grid (motion): the code behind the preview on https://facadeui.dev/components/bento-grid-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/bento-grid-motion-demo.json

Bento grid example component

Usage example (demo) for Bento grid: the code behind the preview on https://facadeui.dev/components/bento-grid. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/bento-grid-demo.json

Button example component

Usage example (demo) for Button: the code behind the preview on https://facadeui.dev/components/button. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/button-demo.json

Card list (motion) example component

Usage example (demo) for Card list (motion): the code behind the preview on https://facadeui.dev/components/card-list-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/card-list-motion-demo.json

Card list example component

Usage example (demo) for Card list: the code behind the preview on https://facadeui.dev/components/card-list. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/card-list-demo.json

Changelog list example component

Usage example (demo) for Changelog list: the code behind the preview on https://facadeui.dev/components/changelog-list. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/changelog-list-demo.json

Changelog page example component

Usage example (demo) for Changelog page: the code behind the preview on https://facadeui.dev/components/changelog. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/changelog-demo.json

Contact form example component

Usage example (demo) for Contact form: the code behind the preview on https://facadeui.dev/components/contact-form. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/contact-form-demo.json

Container example component

Usage example (demo) for Container: the code behind the preview on https://facadeui.dev/components/container. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/container-demo.json

CTA band (motion) example component

Usage example (demo) for CTA band (motion): the code behind the preview on https://facadeui.dev/components/cta-band-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/cta-band-motion-demo.json

CTA band example component

Usage example (demo) for CTA band: the code behind the preview on https://facadeui.dev/components/cta-band. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/cta-band-demo.json

CTA group example component

Usage example (demo) for CTA group: the code behind the preview on https://facadeui.dev/components/cta-group. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/cta-group-demo.json

Documentation page example component

Usage example (demo) for Documentation page: the code behind the preview on https://facadeui.dev/components/docs-site. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/docs-site-demo.json

Eyebrow example component

Usage example (demo) for Eyebrow: the code behind the preview on https://facadeui.dev/components/eyebrow. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/eyebrow-demo.json

FAQ accordion (motion) example component

Usage example (demo) for FAQ accordion (motion): the code behind the preview on https://facadeui.dev/components/faq-accordion-motion. Installs the items it use…

npx shadcn@latest add https://facadeui.dev/r/faq-accordion-motion-demo.json

FAQ accordion example component

Usage example (demo) for FAQ accordion: the code behind the preview on https://facadeui.dev/components/faq-accordion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/faq-accordion-demo.json

Feature grid (motion) example component

Usage example (demo) for Feature grid (motion): the code behind the preview on https://facadeui.dev/components/feature-grid-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/feature-grid-motion-demo.json

Feature grid example component

Usage example (demo) for Feature grid: the code behind the preview on https://facadeui.dev/components/feature-grid. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/feature-grid-demo.json

Feature icon example component

Usage example (demo) for Feature icon: the code behind the preview on https://facadeui.dev/components/feature-icon. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/feature-icon-demo.json

Feature rows (motion) example component

Usage example (demo) for Feature rows (motion): the code behind the preview on https://facadeui.dev/components/feature-rows-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/feature-rows-motion-demo.json

Feature rows example component

Usage example (demo) for Feature rows: the code behind the preview on https://facadeui.dev/components/feature-rows. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/feature-rows-demo.json

Feature tabs example component

Usage example (demo) for Feature tabs: the code behind the preview on https://facadeui.dev/components/feature-tabs. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/feature-tabs-demo.json

Footer example component

Usage example (demo) for Footer: the code behind the preview on https://facadeui.dev/components/footer. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/footer-demo.json

Heading example component

Usage example (demo) for Heading: the code behind the preview on https://facadeui.dev/components/heading. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/heading-demo.json

Hero — centred (motion) example component

Usage example (demo) for Hero — centred (motion): the code behind the preview on https://facadeui.dev/components/hero-centered-motion. Installs the items it us…

npx shadcn@latest add https://facadeui.dev/r/hero-centered-motion-demo.json

Hero — centred example component

Usage example (demo) for Hero — centred: the code behind the preview on https://facadeui.dev/components/hero-centered. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/hero-centered-demo.json

Hero — split (motion) example component

Usage example (demo) for Hero — split (motion): the code behind the preview on https://facadeui.dev/components/hero-split-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/hero-split-motion-demo.json

Hero — split example component

Usage example (demo) for Hero — split: the code behind the preview on https://facadeui.dev/components/hero-split. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/hero-split-demo.json

Hero — with media (motion) example component

Usage example (demo) for Hero — with media (motion): the code behind the preview on https://facadeui.dev/components/hero-with-media-motion. Installs the items …

npx shadcn@latest add https://facadeui.dev/r/hero-with-media-motion-demo.json

Hero — with media example component

Usage example (demo) for Hero — with media: the code behind the preview on https://facadeui.dev/components/hero-with-media. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/hero-with-media-demo.json

Input example component

Usage example (demo) for Input: the code behind the preview on https://facadeui.dev/components/input. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/input-demo.json

Logo cloud (motion) example component

Usage example (demo) for Logo cloud (motion): the code behind the preview on https://facadeui.dev/components/logo-cloud-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/logo-cloud-motion-demo.json

Logo cloud example component

Usage example (demo) for Logo cloud: the code behind the preview on https://facadeui.dev/components/logo-cloud. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/logo-cloud-demo.json

Logo mark example component

Usage example (demo) for Logo mark: the code behind the preview on https://facadeui.dev/components/logo-mark. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/logo-mark-demo.json

Motion primitives example component

Usage example (demo) for Motion primitives: the code behind the preview on https://facadeui.dev/components/motion-primitives. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/motion-primitives-demo.json

Side navigation example component

Usage example (demo) for Side navigation: the code behind the preview on https://facadeui.dev/components/nav-side. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/nav-side-demo.json

Top navigation example component

Usage example (demo) for Top navigation: the code behind the preview on https://facadeui.dev/components/nav-top. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/nav-top-demo.json

Newsletter example component

Usage example (demo) for Newsletter: the code behind the preview on https://facadeui.dev/components/newsletter. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/newsletter-demo.json

Pricing comparison example component

Usage example (demo) for Pricing comparison: the code behind the preview on https://facadeui.dev/components/pricing-comparison. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/pricing-comparison-demo.json

Pricing tier example component

Usage example (demo) for Pricing tier: the code behind the preview on https://facadeui.dev/components/pricing-tier. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/pricing-tier-demo.json

Pricing tiers (motion) example component

Usage example (demo) for Pricing tiers (motion): the code behind the preview on https://facadeui.dev/components/pricing-tiers-motion. Installs the items it use…

npx shadcn@latest add https://facadeui.dev/r/pricing-tiers-motion-demo.json

Pricing tiers example component

Usage example (demo) for Pricing tiers: the code behind the preview on https://facadeui.dev/components/pricing-tiers. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/pricing-tiers-demo.json

Product launch example component

Usage example (demo) for Product launch: the code behind the preview on https://facadeui.dev/components/product-launch. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/product-launch-demo.json

Prose example component

Usage example (demo) for Prose: the code behind the preview on https://facadeui.dev/components/prose. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/prose-demo.json

SaaS landing page example component

Usage example (demo) for SaaS landing page: the code behind the preview on https://facadeui.dev/components/saas-landing. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/saas-landing-demo.json

Section header example component

Usage example (demo) for Section header: the code behind the preview on https://facadeui.dev/components/section-header. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/section-header-demo.json

Section example component

Usage example (demo) for Section: the code behind the preview on https://facadeui.dev/components/section. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/section-demo.json

Select example component

Usage example (demo) for Select: the code behind the preview on https://facadeui.dev/components/select. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/select-demo.json

Stat example component

Usage example (demo) for Stat: the code behind the preview on https://facadeui.dev/components/stat. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/stat-demo.json

Stats (motion) example component

Usage example (demo) for Stats (motion): the code behind the preview on https://facadeui.dev/components/stats-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/stats-motion-demo.json

Stats example component

Usage example (demo) for Stats: the code behind the preview on https://facadeui.dev/components/stats. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/stats-demo.json

Steps (motion) example component

Usage example (demo) for Steps (motion): the code behind the preview on https://facadeui.dev/components/steps-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/steps-motion-demo.json

Steps example component

Usage example (demo) for Steps: the code behind the preview on https://facadeui.dev/components/steps. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/steps-demo.json

Team (motion) example component

Usage example (demo) for Team (motion): the code behind the preview on https://facadeui.dev/components/team-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/team-motion-demo.json

Team example component

Usage example (demo) for Team: the code behind the preview on https://facadeui.dev/components/team. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/team-demo.json

Testimonial — single example component

Usage example (demo) for Testimonial — single: the code behind the preview on https://facadeui.dev/components/testimonial-single. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/testimonial-single-demo.json

Testimonial example component

Usage example (demo) for Testimonial: the code behind the preview on https://facadeui.dev/components/testimonial. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/testimonial-demo.json

Testimonials grid (motion) example component

Usage example (demo) for Testimonials grid (motion): the code behind the preview on https://facadeui.dev/components/testimonials-grid-motion. Installs the item…

npx shadcn@latest add https://facadeui.dev/r/testimonials-grid-motion-demo.json

Testimonials grid example component

Usage example (demo) for Testimonials grid: the code behind the preview on https://facadeui.dev/components/testimonials-grid. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/testimonials-grid-demo.json

Textarea example component

Usage example (demo) for Textarea: the code behind the preview on https://facadeui.dev/components/textarea. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/textarea-demo.json

USP list (motion) example component

Usage example (demo) for USP list (motion): the code behind the preview on https://facadeui.dev/components/usp-list-motion. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/usp-list-motion-demo.json

USP list example component

Usage example (demo) for USP list: the code behind the preview on https://facadeui.dev/components/usp-list. Installs the items it uses.

npx shadcn@latest add https://facadeui.dev/r/usp-list-demo.json