Build a SaaS Landing Page with React and Tailwind CSS v4
Create a high-converting SaaS landing page with hero, features, pricing, testimonials, and FAQ sections — all accessible and themeable with Ninna UI.
What makes a great SaaS landing page
A SaaS landing page needs to communicate value quickly: a clear hero, social proof, feature highlights, pricing, and an FAQ that answers buyer questions. Ninna UI's primitives and layout components give you all the building blocks with accessible semantics and consistent theming.
1. Hero section
Use VStack and Container for a centered hero with a headline, subtext, and CTA buttons:
import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack, Container } from "@ninna-ui/layout";
<Container className="py-20 text-center">
<VStack gap="6" align="center">
<Badge variant="soft" color="primary">New: v0.6 released</Badge>
<Heading as="h1" size="5xl" weight="bold">Ship faster with accessible components</Heading>
<Text size="xl" className="text-base-content/70 max-w-2xl">Ninna UI gives you 69 production-ready React components with zero runtime theming.</Text>
<div className="flex gap-3">
<Button color="primary" size="lg">Get Started</Button>
<Button variant="outline" size="lg">View Docs</Button>
</div>
</VStack>
</Container>2. Feature grid
Use SimpleGrid with Card components for a responsive feature grid:
import { SimpleGrid } from "@ninna-ui/layout";
import { Card } from "@ninna-ui/data-display";
import { Heading, Text } from "@ninna-ui/primitives";
<SimpleGrid columns={{ base: 1, md: 3 }} gap="6">
<Card><Heading as="h3" size="lg">Zero Runtime</Heading><Text>CSS-only theming, no JS provider.</Text></Card>
<Card><Heading as="h3" size="lg">Accessible</Heading><Text>Radix-powered, WCAG 2.1 AA.</Text></Card>
<Card><Heading as="h3" size="lg">Tailwind v4</Heading><Text>CSS-first, no config file.</Text></Card>
</SimpleGrid>3. Pricing cards
Pricing cards are a common pattern. Use Card with VStack for layout and Badge for the 'popular' tier:
import { Card } from "@ninna-ui/data-display";
import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack } from "@ninna-ui/layout";
<Card className="p-8">
<VStack gap="4">
<Badge variant="solid" color="primary">Most Popular</Badge>
<Heading as="h3" size="xl">Pro</Heading>
<Text size="3xl" weight="bold">$29<span className="text-base font-normal text-base-content/60">/mo</span></Text>
<Button color="primary" fullWidth>Start free trial</Button>
</VStack>
</Card>4. FAQ section with structured data
Add an FAQ section with FAQPage schema for rich results in Google and AI answer engines. Use the Accordion from @ninna-ui/navigation:
import { Accordion } from "@ninna-ui/navigation";
<Accordion>
<Accordion.Item value="q1">
<Accordion.Trigger>Is there a free tier?</Accordion.Trigger>
<Accordion.Content>Yes, the free tier includes up to 1,000 monthly active users.</Accordion.Content>
</Accordion.Item>
</Accordion>