Getting Started

Welcome to Nostromo UI! This guide helps you get started with our UI library.

Installation

Install Nostromo UI in your project:

npm install @nostromo/ui-core @nostromo/ui-marketing @nostromo/ui-tw

Theming Setup

1. Import Base CSS

// In your entry file (e.g. main.tsx)
import "@nostromo/ui-tw/styles/base.css";
import "@nostromo/ui-tw/themes/nostromo.css"; // choose or customize theme

2. Apply Theme

<html data-theme="nostromo" data-color-scheme="light">
  <!-- Your content -->
</html>

3. Customize Brand Colors (Optional)

[data-theme="mybrand"] {
  --color-brand-500: 220 100% 50%;  /* Your brand blue */
  --color-brand-600: 220 100% 40%;  /* Darker variant */
}

Complete Theming Guide →

Basic Usage

import { Button } from '@nostromo/ui-core'
 
export default function MyComponent() {
  return <Button>Click me</Button>
}

Tailwind CSS

Nostromo UI uses Tailwind CSS. Make sure to have Tailwind configured in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Next Steps

Explore components to see all available components
See Storybook for interactive examples
Read API documentation for detailed props
Check theming guide for customization

Support

Have questions? Check our FAQ or contact us on GitHub.

Home Theming