Home

Nostromo UI

A modern, accessible UI library built with React, TypeScript, and Tailwind CSS. Featuring 30 core components, 6 marketing components, and 4 predefined themes with full dark mode support.

Get StartedOpen Storybook
Production ReadyWCAG 2.1 AA

Nostromo UI

Quick Install

# npm
npm install @nostromo/ui-core @nostromo/ui-marketing @nostromo/ui-tw
 
# pnpm
pnpm add @nostromo/ui-core @nostromo/ui-marketing @nostromo/ui-tw
 
# yarn
yarn add @nostromo/ui-core @nostromo/ui-marketing @nostromo/ui-tw
Get Started →|View Storybook →

Why Nostromo UI?

  • 🎨 4 Predefined Themes - Nostromo, Mother, LV-426, Sulaco with easy customization
  • ♿ WCAG 2.1 AA Compliant - Accessible out of the box
  • ⚡ Zero Runtime Overhead - CSS variables, no JavaScript theming
  • 📦 Tree-shakeable - Import only what you need
  • 🎯 TypeScript First - Full type safety and IntelliSense
  • 🌙 Dark Mode - System and manual dark mode support

Components

View All Components →

Core Components (30)

Button

Stable

Interactive buttons with loading states and variants

View docs →•Storybook →

Badge

Stable

Status indicators and labels

View docs →•Storybook →

Input

Stable

Text input fields with validation

View docs →•Storybook →

Card

Stable

Container components for content

View docs →•Storybook →

Calendar

Stable

Date picker with multiple selection modes

View docs →•Storybook →

Charts

Stable

Data visualization components

View docs →•Storybook →

Marketing Components (6)

Hero

Stable

Hero sections with customizable layouts

View docs →•Storybook →

Features

Stable

Feature showcase grids with icons

View docs →•Storybook →

Pricing

Stable

Pricing tables with yearly/monthly toggle

View docs →•Storybook →

Quick Start

  1. Install packages (see above)
  2. Configure Tailwind - Add Nostromo preset to tailwind.config.js
  3. Import CSS - Add base styles and theme
  4. Start using components
Complete Setup Guide →

Documentation

Getting Started