Home

Nostromo UI

Welcome to Nostromo UI - a comprehensive UI library built with React, TypeScript and Tailwind CSS.

🎨 Theming & Design Tokens

Nostromo UI features a powerful theming system built around CSS variables in HSL format:

  • 4 Predefined Themes - Nostromo, Mother, LV-426, Sulaco
  • Custom Brand Colors - Easy brand customization
  • Dark Mode Support - System and manual dark mode
  • Accessibility - WCAG 2.1 AA compliant colors
  • Performance - Zero runtime overhead

Explore Theming Guide →

Components

Explore our collection of components:

  • Button - Buttons with various variants
  • Input - Input fields with validation
  • Dialog - Modals and dialogs
  • Badge - Status badges and labels
  • Accordion - Expandable sections
  • Alert - Notifications and warnings
  • Avatar - User avatars
  • Card - Content cards
  • Checkbox - Checkbox components
  • Icon - Icons and symbols
  • Label - Form labels
  • Pagination - Page navigation
  • Progress - Progress indicators
  • Select - Dropdown menus
  • Separator - Divider lines
  • Skeleton - Loading placeholders
  • Switch - Toggle switches
  • Table - Data tables
  • Tabs - Tab navigation
  • Textarea - Multi-line text fields
  • Toast - Popup notifications
  • Tooltip - Help text

Get Started

See Getting Started to get started with Nostromo UI.

Documentation

Storybook

All components have interactive examples in Storybook. Start Storybook to see live examples:

npm run storybook

Live Storybook: http://localhost:6007 (opens in a new tab) (when Storybook is running)

Getting Started