# Facade UI

> Accessible sections and page templates for marketing websites: heroes, feature grids, pricing tables, FAQs and footers. Free and open source (MIT). Install a piece with the shadcn CLI and its source code is copied into your project.

Built with React 19 (server components by default), Base UI and Tailwind CSS v4. Sections use shadcn's colour variable names, so they take an existing shadcn theme. Every item is tested against WCAG 2.2 AA.

Install: `npx shadcn@latest add @facade/<name>` (registry namespace `@facade`, URL form `https://facadeui.dev/r/<name>.json`). Import `styles/facade-tokens.css` after Tailwind first. Full index: https://facadeui.dev/r/registry.json.

## Guides

- [Installation](https://facadeui.dev/docs/installation.md)
- [Theming](https://facadeui.dev/docs/theming.md)
- [Theme customiser](https://facadeui.dev/docs/customise.md)
- [Accessibility](https://facadeui.dev/docs/accessibility.md)
- [For AI agents](https://facadeui.dev/docs/agents.md)

## Sections

- [Top navigation](https://facadeui.dev/components/nav-top.md): 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.
- [Hero — centred](https://facadeui.dev/components/hero-centered.md): A centred landing page hero: eyebrow, headline, text and buttons, with optional media below.
- [Hero — split](https://facadeui.dev/components/hero-split.md): 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.
- [Hero — with media](https://facadeui.dev/components/hero-with-media.md): 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.
- [Logo cloud](https://facadeui.dev/components/logo-cloud.md): A "trusted by" row of customer logos. Company names are available as text, so screen readers announce a list of names, not unlabelled images.
- [USP list](https://facadeui.dev/components/usp-list.md): Three or four short selling points or benefits, each with an icon and a line of text.
- [Feature grid](https://facadeui.dev/components/feature-grid.md): 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.
- [Feature rows](https://facadeui.dev/components/feature-rows.md): Rows of media and text that alternate sides. Only the layout alternates: in reading order, the text always comes first.
- [Bento grid](https://facadeui.dev/components/bento-grid.md): Feature tiles in mixed sizes. Tiles are placed in the order you give, so reading order matches what you see.
- [FAQ accordion](https://facadeui.dev/components/faq-accordion.md): 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 you can add FAQPage structured data.
- [CTA band](https://facadeui.dev/components/cta-band.md): A closing call to action band. Choose a muted, card, plain or primary-coloured background.
- [Footer](https://facadeui.dev/components/footer.md): 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.
- [Stats](https://facadeui.dev/components/stats.md): A row of key numbers or metrics as a description list. You can give a spoken form for abbreviated values.
- [Testimonials grid](https://facadeui.dev/components/testimonials-grid.md): 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.
- [Testimonial — single](https://facadeui.dev/components/testimonial-single.md): One large customer quote, with an optional portrait beside it or a tinted background.
- [Pricing tiers](https://facadeui.dev/components/pricing-tiers.md): 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.
- [Pricing comparison](https://facadeui.dev/components/pricing-comparison.md): A pricing comparison table with row and column headers. Each cell states its value in text, not only with a tick.
- [Card list](https://facadeui.dev/components/card-list.md): A grid of linked cards for blog posts, changelog entries or case studies. Dates are marked up so that software can read them.
- [Feature tabs](https://facadeui.dev/components/feature-tabs.md): 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.
- [Steps](https://facadeui.dev/components/steps.md): A "how it works" sequence as an ordered list, so the order is in the markup and not only in the visible numbers.
- [Team](https://facadeui.dev/components/team.md): An "about us" team section. Each social link names the person as well as the network.
- [Newsletter](https://facadeui.dev/components/newsletter.md): 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.
- [Banner](https://facadeui.dev/components/banner.md): 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.
- [Side navigation](https://facadeui.dev/components/nav-side.md): Side navigation for documentation, with collapsible groups and one named landmark. On small screens it becomes a drawer.
- [Changelog list](https://facadeui.dev/components/changelog-list.md): 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 article with a heading and an anchor.
- [Contact form](https://facadeui.dev/components/contact-form.md): 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 right field, and announces the result. It makes no network call itself.

## Motion

- [Motion primitives](https://facadeui.dev/components/motion-primitives.md): Animation building blocks: FacadeMotionProvider, FadeIn, Reveal, Stagger and Collapse. They animate only opacity and transform, and follow the reduced-motion setting.
- [Hero — centred (motion)](https://facadeui.dev/components/hero-centered-motion.md): The centred hero, with its parts appearing one after another when the page loads.
- [Hero — split (motion)](https://facadeui.dev/components/hero-split-motion.md): The split hero, with its parts appearing one after another when the page loads.
- [Hero — with media (motion)](https://facadeui.dev/components/hero-with-media-motion.md): The media hero, with its parts appearing one after another when the page loads.
- [Logo cloud (motion)](https://facadeui.dev/components/logo-cloud-motion.md): The logo cloud, with logos fading in one after another.
- [USP list (motion)](https://facadeui.dev/components/usp-list-motion.md): The USP list, with items appearing one after another.
- [Feature grid (motion)](https://facadeui.dev/components/feature-grid-motion.md): The feature grid, with cards appearing one after another.
- [Feature rows (motion)](https://facadeui.dev/components/feature-rows-motion.md): The feature rows, each appearing as you scroll to it.
- [Bento grid (motion)](https://facadeui.dev/components/bento-grid-motion.md): The bento grid, with tiles appearing one after another.
- [FAQ accordion (motion)](https://facadeui.dev/components/faq-accordion-motion.md): The FAQ accordion, with rows appearing as you scroll to them. The open and close animation works without JavaScript.
- [CTA band (motion)](https://facadeui.dev/components/cta-band-motion.md): The CTA band, appearing as you scroll to it.
- [Stats (motion)](https://facadeui.dev/components/stats-motion.md): The stats, with numbers appearing one after another as you scroll to them.
- [Testimonials grid (motion)](https://facadeui.dev/components/testimonials-grid-motion.md): The testimonials grid, with quotes appearing one after another as you scroll to it.
- [Pricing tiers (motion)](https://facadeui.dev/components/pricing-tiers-motion.md): The pricing tiers, with plans appearing one after another as you scroll to them.
- [Card list (motion)](https://facadeui.dev/components/card-list-motion.md): The card list, with cards appearing one after another as you scroll to it.
- [Steps (motion)](https://facadeui.dev/components/steps-motion.md): The steps, appearing in order. Here the order of the animation matches the meaning.
- [Team (motion)](https://facadeui.dev/components/team-motion.md): The team grid, with people appearing one after another as you scroll to it.

## Templates

- [SaaS landing page](https://facadeui.dev/components/saas-landing.md): A complete SaaS landing page built from Facade UI sections. You supply one content object.
- [Agency site](https://facadeui.dev/components/agency.md): An agency or studio website: a hero over an image, a grid of work, process steps, a featured quote and the team.
- [Product launch](https://facadeui.dev/components/product-launch.md): A product launch landing page: an announcement banner, a bento grid of highlights, details in tabs and an email sign-up.
- [Changelog page](https://facadeui.dev/components/changelog.md): 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 object.
- [Documentation page](https://facadeui.dev/components/docs-site.md): 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 supply one content object and the article body.

## Atoms

- [Button](https://facadeui.dev/components/button.md): A button built on Base UI, with Facade styles. Every size is at least 44 by 44 pixels.
- [Badge](https://facadeui.dev/components/badge.md): A small label for a status or category. You can add a prefix that only screen readers announce.
- [Heading](https://facadeui.dev/components/heading.md): Renders an h1 to h6 from a number, so you set the heading level and the visual size separately.
- [Eyebrow](https://facadeui.dev/components/eyebrow.md): The small label above a section heading. It is a paragraph, not a heading.
- [Container](https://facadeui.dev/components/container.md): Sets the maximum width and side padding that every section uses. Both come from the container tokens.
- [Section](https://facadeui.dev/components/section.md): The outer wrapper of a section. It sets the element, the vertical spacing, and the link to the heading that names the section.
- [Section header](https://facadeui.dev/components/section-header.md): An eyebrow, a heading and a description. It also sets the heading id that a section uses for its accessible name.
- [CTA group](https://facadeui.dev/components/cta-group.md): A row of call-to-action links styled as buttons. Because they are links, people can open them in a new tab.
- [Stat](https://facadeui.dev/components/stat.md): One number with its label, as part of a description list. You can give a spoken form for abbreviated values.
- [Logo mark](https://facadeui.dev/components/logo-mark.md): One customer logo, with an optional link. Logos get the same visual height, and the company name is available to screen readers.
- [Feature icon](https://facadeui.dev/components/feature-icon.md): A tinted box that holds an icon. You pass an icon component, and it is hidden from screen readers.
- [Testimonial](https://facadeui.dev/components/testimonial.md): A quote with the name of the person who said it, and an optional star rating that screen readers announce as text.
- [Pricing tier](https://facadeui.dev/components/pricing-tier.md): 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.
- [Input](https://facadeui.dev/components/input.md): 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.
- [Select](https://facadeui.dev/components/select.md): 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 chosen value when a form is submitted.
- [Textarea](https://facadeui.dev/components/textarea.md): 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.
- [Prose](https://facadeui.dev/components/prose.md): 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 in it.

## Theme

- [Design tokens](https://facadeui.dev/components/tokens.md): The design tokens Facade UI needs: shadcn colour names, plus --facade-* variables for heading sizes, section spacing and animation. The default colours are Tailwind's orange and stone. Import the file in your globals.css.
- [Theme presets](https://facadeui.dev/components/themes.md): 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.

## Utilities

- [cn](https://facadeui.dev/components/utils.md): 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 it.
- [Shared types](https://facadeui.dev/components/types.md): Types that every section uses: heading levels, image and link components you can replace, and call-to-action items.

## Optional

- [Source on GitHub](https://github.com/facade-ui/facade-ui)
- [Registry index (JSON)](https://facadeui.dev/r/registry.json)