Your marketing site, from the same system as your product.

Most teams ship a polished app and a landing page that looks like it was built by a different company, because it was: a template, a site builder, a one-off repo that drifts the moment the brand moves. ui-landing is the sections a marketing site repeats: a hero, a feature grid, a comparison, testimonials, a footer, built on the same tokens and the same conventions as everything else here. Change --primary and both your product and your pitch follow. And like the rest of the system it is source-shipped: every section is readable .tsx you can open, trace and rewrite.

Install

bun add @voila.dev/ui

@import "@voila.dev/ui/styles/landing.css";

Or copy the source — it's the same files. The landing stylesheet declares the package's own Tailwind sources, so the one import covers both the marquee keyframes and the class scan.

Peers: react@19, react-dom@19, tailwindcss@4.

The 3-minute win

A complete section: layout from Section and Container, an intro, a grid of feature cards. This is the shape every marketing page repeats.

import { Container, FeatureGrid, Section, SectionIntro } from "@voila.dev/ui/landing";
 
export function WhyUs() {
	return (
		<Section.Root background="muted">
			<Container size="md">
				<SectionIntro.Root>
					<SectionIntro.Title>Why choose us?</SectionIntro.Title>
					<SectionIntro.Description>
						Two reasons are enough to start.
					</SectionIntro.Description>
				</SectionIntro.Root>
				<FeatureGrid.Root tone="primary" columns="2" className="mt-10">
					<FeatureGrid.Card>
						<FeatureGrid.CardIcon>{/* an icon */}</FeatureGrid.CardIcon>
						<FeatureGrid.Card.Title>Fast</FeatureGrid.Card.Title>
						<FeatureGrid.Card.Description>
							From brief to live page in an afternoon.
						</FeatureGrid.Card.Description>
					</FeatureGrid.Card>
					{/* …more cards */}
				</FeatureGrid.Root>
			</Container>
		</Section.Root>
	);
}

Mental model

Each section is a compound component you compose, not a template you configure. LandingHero.Root holds Title, Lead, Actions, Media; you arrange the parts, drop the ones you do not need, and put real elements between them. There are no heroTitle string props and no slots to fight, which also makes the sections predictable for an AI to generate against: the pattern it learns from one section holds for all twenty-three. Colour comes from the token palette through a small set of tone props (primary, brand, highlight, destructive), so a rebrand never touches a section file.

Page map

Proof first: This site is built with it walks the ui.voila.dev homepage section by section.

Layout and typography:

• Section: vertical rhythm and background bands.
• Container: the max-width scale.
• Heading: display headings, h1 to h4.
• Text: leads, body copy, muted notes.
• Eyebrow: the small label above a title, with dot or icon.
• SectionIntro: centred title and description for a section.
• PageHeader: the top of an interior page.

Page chrome:

• SiteHeader: sticky header with nav and mobile menu.
• SiteFooter: brand, link columns, legal line.

Sections:

• LandingHero: the top of the page: title, lead, actions, media.
• StatsRow: headline numbers with dividers.
• FeatureGrid: icon cards for benefits or pain points.
• BentoGrid: one featured tile plus supporting tiles.
• NumberedCards: a step-by-step process.
• ComparisonSection: with and without, side by side.
• StepTracks: two parallel journeys, one per audience.
• TestimonialGrid: quotes with avatars and ratings.
• LogoMarquee: partner logos, scrolling or static.
• CtaBanner: the closing call to action.
• ContactCards: ways to get in touch.

Blog:

• ArticleCard: a post preview with image, tags and meta.
• ArticleTags: the tag list on its own.
• ProseArticle: typographic styling for article bodies.