Skip to main content
ninna-ui
Astro

Astro Component Library

Ninna UI is the best Tailwind CSS v4 component library for Astro projects. 67 accessible React components, CSS-only theming, and zero runtime overhead.

Astro (v5 island architecture)

Astro is a modern web framework for building fast, content-driven websites. Its unique 'Island Architecture' allows you to use React components only where they're needed, ensuring minimal JavaScript is sent to the client.

Astro + Ninna UI

Here's why Ninna UI is the perfect component library for your Astro project:

Perfect for Islands - use Ninna UI's React components as interactive blocks while keeping the rest of the page static.

CSS-only theming - presets load instantly without React hydration, ideal for Astro's server-first model.

Vite 7 integrated - compatible with Astro 5's new build engine and Tailwind CSS v4.

Zero runtime overhead - theme variables are resolved by the browser, not JavaScript.

Automatic dark mode - respects system preferences without any Astro-specific setup.

Install Tailwind CSS and Ninna UI for Astro

Setting up Ninna UI with Astro takes just a few minutes.

1

Install Ninna UI and React in your Astro project:

npm install @ninna-ui/core @ninna-ui/primitives @astrojs/react
2

Add theme import to src/styles/globals.css:

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";
3

Use components with client directives:

--- 
// src/pages/index.astro
import { Button } from "@ninna-ui/primitives";
import "../styles/globals.css";
---
<html data-theme="default">
  <body>
    <Button client:load color="primary">Island Button</Button>
  </body>
</html>

Example

Here's what a Astro app looks like with Ninna UI - clean, minimal, no wrappers:

// src/components/Hero.tsx
import { Heading, Text, Button } from "@ninna-ui/primitives";


export function Hero() {
  return (
    <div className="py-20 text-center">
      <Heading size="4xl">Astro + Ninna UI</Heading>
      <Text className="mt-4 opacity-70">Lightning fast islands.</Text>
      <Button className="mt-6">Get Started</Button>
    </div>
  );
}

67 components available

Ninna UI provides a comprehensive set of React components organized into focused packages:

@ninna-ui/primitives

Button, Heading, Text, Badge, Code, Kbd, Avatar

@ninna-ui/forms

Input, Select, Checkbox, Radio, Switch, Slider, Textarea

@ninna-ui/layout

Box, VStack, HStack, Container, Center, Grid, Separator

@ninna-ui/navigation

Tabs, Accordion, Breadcrumb, Pagination, Steps

@ninna-ui/data-display

Card, Table, DataTable, Stat, Timeline, Calendar, Tree

@ninna-ui/feedback

Alert, Toast, Progress, Skeleton, Loading, EmptyState

Browse all components

Start building with Astro + Ninna UI

One CSS import, zero JavaScript config. Get started in under 60 seconds.

Install Guide Browse Examples

Ninna UI for other frameworks

React Component Library

Next.js Component Library

React Router v7 Component Library

Vite Component Library

Remix Component Library

Compare UI Libraries

Learn more about Astro