Skip to main content
ninna-ui
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>

Related Blocks

Portfolio Grid

A project gallery for a professional portfolio.

Component Docs

CardInputFieldButtonBadge

FAQ