Accessible sections and page templates for marketing websites: heroes, feature grids, pricing tables, FAQs and footers. Built with Base UI and Tailwind CSS v4.
An agency or studio website: a hero over an image, a grid of work, process steps, a featured quote and the team.
Usage example (demo) for Agency site: the code behind the preview on https://facadeui.dev/components/agency. Installs the items it uses.
A small label for a status or category. You can add a prefix that only screen readers announce.
Usage example (demo) for Badge: the code behind the preview on https://facadeui.dev/components/badge. Installs the items it uses.
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.
Usage example (demo) for Banner: the code behind the preview on https://facadeui.dev/components/banner. Installs the items it uses.
Feature tiles in mixed sizes. Tiles are placed in the order you give, so reading order matches what you see.
Usage example (demo) for Bento grid: the code behind the preview on https://facadeui.dev/components/bento-grid. Installs the items it uses.
The bento grid, with tiles appearing one after another.
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.
A button built on Base UI, with Facade styles. Every size is at least 44 by 44 pixels.
Usage example (demo) for Button: the code behind the preview on https://facadeui.dev/components/button. Installs the items it uses.
A grid of linked cards for blog posts, changelog entries or case studies. Dates are marked up so that software can read them.
Usage example (demo) for Card list: the code behind the preview on https://facadeui.dev/components/card-list. Installs the items it uses.
The card list, with cards appearing one after another as you scroll to it.
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.
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.
Sets the maximum width and side padding that every section uses. Both come from the container tokens.
Usage example (demo) for Container: the code behind the preview on https://facadeui.dev/components/container. Installs the items it uses.
A closing call to action band. Choose a muted, card, plain or primary-coloured background.
Usage example (demo) for CTA band: the code behind the preview on https://facadeui.dev/components/cta-band. Installs the items it uses.
The CTA band, appearing as you scroll to it.
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.
A row of call-to-action links styled as buttons. Because they are links, people can open them in a new tab.
Usage example (demo) for CTA group: the code behind the preview on https://facadeui.dev/components/cta-group. Installs the items it uses.
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.
Sample content and placeholders shared by the Facade UI examples. Installed with any *-demo item.
The small label above a section heading. It is a paragraph, not a heading.
Usage example (demo) for Eyebrow: the code behind the preview on https://facadeui.dev/components/eyebrow. Installs the items it uses.
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.
Usage example (demo) for FAQ accordion: the code behind the preview on https://facadeui.dev/components/faq-accordion. Installs the items it uses.
The FAQ accordion, with rows appearing as you scroll to them. The open and close animation works without JavaScript.
Usage example (demo) for FAQ accordion (motion): the code behind the preview on https://facadeui.dev/components/faq-accordion-motion. Installs the items it uses.
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.
Usage example (demo) for Feature grid: the code behind the preview on https://facadeui.dev/components/feature-grid. Installs the items it uses.
The feature grid, with cards appearing one after another.
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.
A tinted box that holds an icon. You pass an icon component, and it is hidden from screen readers.
Usage example (demo) for Feature icon: the code behind the preview on https://facadeui.dev/components/feature-icon. Installs the items it uses.
Rows of media and text that alternate sides. Only the layout alternates: in reading order, the text always comes first.
Usage example (demo) for Feature rows: the code behind the preview on https://facadeui.dev/components/feature-rows. Installs the items it uses.
The feature rows, each appearing as you scroll to it.
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.
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.
Usage example (demo) for Feature tabs: the code behind the preview on https://facadeui.dev/components/feature-tabs. Installs the items it uses.
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.
Usage example (demo) for Footer: the code behind the preview on https://facadeui.dev/components/footer. Installs the items it uses.
Renders an h1 to h6 from a number, so you set the heading level and the visual size separately.