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 Heading: the code behind the preview on https://facadeui.dev/components/heading. Installs the items it uses.
A centred landing page hero: eyebrow, headline, text and buttons, with optional media below.
Usage example (demo) for Hero — centred: the code behind the preview on https://facadeui.dev/components/hero-centered. Installs the items it uses.
The centred hero, with its parts appearing one after another when the page loads.
Usage example (demo) for Hero — centred (motion): the code behind the preview on https://facadeui.dev/components/hero-centered-motion. Installs the items it uses.
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.
Usage example (demo) for Hero — split: the code behind the preview on https://facadeui.dev/components/hero-split. Installs the items it uses.
The split hero, with its parts appearing one after another when the page loads.
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.
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.
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.
The media hero, with its parts appearing one after another when the page loads.
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 it uses.
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.
A "trusted by" row of customer logos. Company names are available as text, so screen readers announce a list of names, not unlabelled images.
Usage example (demo) for Logo cloud: the code behind the preview on https://facadeui.dev/components/logo-cloud. Installs the items it uses.
The logo cloud, with logos fading in one after another.
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.
One customer logo, with an optional link. Logos get the same visual height, and the company name is available to screen readers.
Usage example (demo) for Logo mark: the code behind the preview on https://facadeui.dev/components/logo-mark. Installs the items it uses.
Animation building blocks: FacadeMotionProvider, FadeIn, Reveal, Stagger and Collapse. They animate only opacity and transform, and follow the reduced-motion setting.
Usage example (demo) for Motion primitives: the code behind the preview on https://facadeui.dev/components/motion-primitives. Installs the items it uses.
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.
Usage example (demo) for Newsletter: the code behind the preview on https://facadeui.dev/components/newsletter. Installs the items it uses.
A pricing comparison table with row and column headers. Each cell states its value in text, not only with a tick.
Usage example (demo) for Pricing comparison: the code behind the preview on https://facadeui.dev/components/pricing-comparison. Installs the items it uses.
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.
Usage example (demo) for Pricing tier: the code behind the preview on https://facadeui.dev/components/pricing-tier. Installs the items it uses.
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.
Usage example (demo) for Pricing tiers: the code behind the preview on https://facadeui.dev/components/pricing-tiers. Installs the items it uses.
The pricing tiers, with plans appearing one after another as you scroll to them.
Usage example (demo) for Pricing tiers (motion): the code behind the preview on https://facadeui.dev/components/pricing-tiers-motion. Installs the items it uses.
A product launch landing page: an announcement banner, a bento grid of highlights, details in tabs and an email sign-up.
Usage example (demo) for Product launch: the code behind the preview on https://facadeui.dev/components/product-launch. Installs the items it uses.
A complete SaaS landing page built from Facade UI sections. You supply one content object.
Usage example (demo) for SaaS landing page: the code behind the preview on https://facadeui.dev/components/saas-landing. Installs the items it uses.
The outer wrapper of a section. It sets the element, the vertical spacing, and the link to the heading that names the section.
Usage example (demo) for Section: the code behind the preview on https://facadeui.dev/components/section. Installs the items it uses.
An eyebrow, a heading and a description. It also sets the heading id that a section uses for its accessible name.
Usage example (demo) for Section header: the code behind the preview on https://facadeui.dev/components/section-header. Installs the items it uses.
Types that every section uses: heading levels, image and link components you can replace, and call-to-action items.
Side navigation for documentation, with collapsible groups and one named landmark. On small screens it becomes a drawer.
Usage example (demo) for Side navigation: the code behind the preview on https://facadeui.dev/components/nav-side. Installs the items it uses.
One number with its label, as part of a description list. You can give a spoken form for abbreviated values.
Usage example (demo) for Stat: the code behind the preview on https://facadeui.dev/components/stat. Installs the items it uses.
A row of key numbers or metrics as a description list. You can give a spoken form for abbreviated values.
Usage example (demo) for Stats: the code behind the preview on https://facadeui.dev/components/stats. Installs the items it uses.
The stats, with numbers appearing one after another as you scroll to them.