---
name: "@facade"
slug: "facade"
description: "Accessible sections and page templates for marketing websites: heroes, feature grids, pricing tables, FAQs and footers. Built with Base UI and Tailwind CSS v4."
category: "Animated components"
tags: ["accessibility", "animation", "blocks", "buttons", "cards", "design-system", "forms", "hooks", "icons", "marketing", "navigation", "overlays", "payments", "tables", "theming"]
framework: "react"
license: "MIT"
author: "facade-ui"
website: "https://facadeui.dev"
github: "https://github.com/facade-ui/facade-ui"
registry: "https://facadeui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 122
generated_at: "2026-10-10T06:32:55.998Z"
---

# @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.

## Links

- Website: https://facadeui.dev
- GitHub: https://github.com/facade-ui/facade-ui
- Registry JSON: https://facadeui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/facade
- This file: https://sh4dcn.vercel.app/md/facade.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://facadeui.dev/r/registry.json
pnpm dlx shadcn@latest add https://facadeui.dev/r/registry.json
bunx shadcn@latest add https://facadeui.dev/r/registry.json
# clone the source repo
git clone https://github.com/facade-ui/facade-ui.git
# fetch the raw registry index
curl -s https://facadeui.dev/r/registry.json
```

## Components (122)

| name | type | description | install |
| --- | --- | --- | --- |
| tokens | registry: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` |
| themes | registry: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` |
| utils | registry: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` |
| types | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| nav-top | registry: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-centered | registry: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-centered-motion | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:block | The USP list, with items appearing one after another. | `npx shadcn@latest add https://facadeui.dev/r/usp-list-motion.json` |
| feature-grid | registry: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 | registry:block | The feature grid, with cards appearing one after another. | `npx shadcn@latest add https://facadeui.dev/r/feature-grid-motion.json` |
| feature-rows | registry: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 | registry: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 | registry: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 | registry:block | The bento grid, with tiles appearing one after another. | `npx shadcn@latest add https://facadeui.dev/r/bento-grid-motion.json` |
| faq-accordion | registry: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 | registry: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 | registry: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 | registry:block | The CTA band, appearing as you scroll to it. | `npx shadcn@latest add https://facadeui.dev/r/cta-band-motion.json` |
| footer | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| nav-side | registry: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` |
| saas-landing | registry: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 | registry: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 | registry: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` |
| examples-content | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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` |
| container-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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` |
| eyebrow-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-centered-motion-demo | registry: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-centered-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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` |
| logo-cloud-motion-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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` |
| nav-side-demo | registry: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` |
| nav-top-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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` |
| saas-landing-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry: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` |
| usp-list-motion-demo | registry: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-demo | registry: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` |

## For AI agents

```text
You are adding components from @facade to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/facade.md) for the component list.
2. Fetch the machine-readable index: https://facadeui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: facade).
```