Accessible sections and page templates for marketing websites: heroes, feature grids, pricing tables, FAQs and footers. Built with Base UI and Tailwind CSS v4.
Usage example (demo) for Stats (motion): the code behind the preview on https://facadeui.dev/components/stats-motion. Installs the items it uses.
A "how it works" sequence as an ordered list, so the order is in the markup and not only in the visible numbers.
Usage example (demo) for Steps: the code behind the preview on https://facadeui.dev/components/steps. Installs the items it uses.
The steps, appearing in order. Here the order of the animation matches the meaning.
Usage example (demo) for Steps (motion): the code behind the preview on https://facadeui.dev/components/steps-motion. Installs the items it uses.
An "about us" team section. Each social link names the person as well as the network.
Usage example (demo) for Team: the code behind the preview on https://facadeui.dev/components/team. Installs the items it uses.
The team grid, with people appearing one after another as you scroll to it.
Usage example (demo) for Team (motion): the code behind the preview on https://facadeui.dev/components/team-motion. Installs the items it uses.
A quote with the name of the person who said it, and an optional star rating that screen readers announce as text.
Usage example (demo) for Testimonial: the code behind the preview on https://facadeui.dev/components/testimonial. Installs the items it uses.
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.
Usage example (demo) for Testimonials grid: the code behind the preview on https://facadeui.dev/components/testimonials-grid. Installs the items it uses.
The testimonials grid, with quotes appearing one after another as you scroll to it.
Usage example (demo) for Testimonials grid (motion): the code behind the preview on https://facadeui.dev/components/testimonials-grid-motion. Installs the items it uses.
One large customer quote, with an optional portrait beside it or a tinted background.
Usage example (demo) for Testimonial — single: the code behind the preview on https://facadeui.dev/components/testimonial-single. Installs the items it uses.
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.
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.
Usage example (demo) for Top navigation: the code behind the preview on https://facadeui.dev/components/nav-top. Installs the items it uses.
Three or four short selling points or benefits, each with an icon and a line of text.
Usage example (demo) for USP list: the code behind the preview on https://facadeui.dev/components/usp-list. Installs the items it uses.
The USP list, with items appearing one after another.
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.