Use Case
Create a Developer Portfolio with React and Tailwind CSS v4
Build a clean, fast developer portfolio with hero, projects grid, skills section, and contact form — all accessible and responsive with Ninna UI.
Why a component library for a portfolio
A portfolio is a small project, but it still benefits from accessible components and consistent theming. Ninna UI's primitives give you semantic HTML, accessible interactions, and oklch colors without the overhead of a full design system setup.
1. Hero with name and tagline
Use VStack for a clean, centered hero:
import { Heading, Text, Button, Badge } from "@ninna-ui/primitives";
import { VStack, Container } from "@ninna-ui/layout";
<Container className="py-24">
<VStack gap="4" align="center">
<Badge variant="soft" color="primary">Available for work</Badge>
<Heading as="h1" size="5xl" weight="bold">Jane Developer</Heading>
<Text size="xl" className="text-base-content/70">Full-stack engineer building accessible web apps with React.</Text>
</VStack>
</Container>2. Projects grid
Use SimpleGrid with Card for a responsive projects showcase:
import { SimpleGrid } from "@ninna-ui/layout";
import { Card } from "@ninna-ui/data-display";
import { Heading, Text, Badge } from "@ninna-ui/primitives";
<SimpleGrid columns={{ base: 1, sm: 2, lg: 3 }} gap="6">
<Card>
<img src="/project1.png" alt="Project screenshot" className="rounded-t-xl" />
<div className="p-6">
<Heading as="h3" size="lg">TaskFlow</Heading>
<Text>Real-time task management app built with React and WebSocket.</Text>
<div className="flex gap-2 mt-3">
<Badge size="sm">React</Badge>
<Badge size="sm">TypeScript</Badge>
</div>
</div>
</Card>
</SimpleGrid>3. Contact form
Use Field, Input, Textarea, and Button from the forms and primitives packages for an accessible contact form:
import { Field, Input, Textarea } from "@ninna-ui/forms";
import { Button } from "@ninna-ui/primitives";
import { VStack } from "@ninna-ui/layout";
<VStack gap="4" as="form">
<Field label="Name"><Input placeholder="Your name" /></Field>
<Field label="Email"><Input type="email" placeholder="you@example.com" /></Field>
<Field label="Message"><Textarea placeholder="Tell me about your project" /></Field>
<Button type="submit" color="primary">Send Message</Button>
</VStack>