Getting Started

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

Prerequisites

Node.js: >= 20.0.0
React: >= 18.0.0
TypeScript: >= 5.0.0 (recommended)
Tailwind CSS: >= 3.0.0 or >= 4.0.0

Installation

From npm (when published)

Once published to npm, install Nostromo UI in your project:

# 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

From GitHub (development/local)

For local development or if packages aren't published yet, you can install directly from GitHub:

# Using pnpm (recommended for monorepo)
pnpm add @nostromo/ui-core@workspace:* @nostromo/ui-marketing@workspace:* @nostromo/ui-tw@workspace:*
 
# Or clone the repository and link locally
git clone https://github.com/JarlLyng/nostromo-ui.git
cd nostromo-ui
pnpm install
pnpm build

Note: Currently, packages are not published to npm. For production use, clone the repository and build locally, or wait for npm publication.

Peer Dependencies

Nostromo UI requires the following peer dependencies:

npm install react react-dom
npm install -D tailwindcss

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 Configuration

Nostromo UI uses Tailwind CSS. Configure Tailwind in your project:

// tailwind.config.js
const nostromoPreset = require("@nostromo/ui-tw/tailwind.preset.js");
 
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nostromo/**/*.{js,ts,jsx,tsx}"
  ],
  presets: [nostromoPreset],
};

Project Setup Examples

Next.js (App Router):

// app/layout.tsx
import "@nostromo/ui-tw/styles/base.css";
import "@nostromo/ui-tw/themes/nostromo.css";
 
export default function RootLayout({ children }) {
  return (
    <html data-theme="nostromo" data-color-scheme="light">
      <body>{children}</body>
    </html>
  );
}

Vite:

// main.tsx
import "@nostromo/ui-tw/styles/base.css";
import "@nostromo/ui-tw/themes/nostromo.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Dark Mode Toggle:

// Theme toggle example
function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);
  
  useEffect(() => {
    document.documentElement.setAttribute(
      'data-color-scheme', 
      isDark ? 'dark' : 'light'
    );
  }, [isDark]);
  
  return (
    <button onClick={() => setIsDark(!isDark)}>
      {isDark ? 'Light' : 'Dark'} Mode
    </button>
  );
}

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