🌟 Supernova UI

Supernova UI is a modern React component library built with TypeScript, Vite, Tailwind CSS, and documented using Storybook. Designed to be reusable, scalable, and fast, it serves as the visual foundation for Lumora products.

✨ Technologies Used

• React
• TypeScript
• Vite
• Tailwind CSS
• Storybook

📦 Installation

npm install @lumora-app/supernova-ui

🚀 Usage

Import all icons

import { ArrowDown, ChevronRight, Home } from "@lumora-app/supernova-ui";

function App() {
  return (
    <div>
      <ArrowDown className="w-6 h-6 text-blue-500" />
      <ChevronRight className="w-6 h-6" />
      <Home className="w-6 h-6" />
    </div>
  );
}

Import from specific categories (better tree-shaking)

// Import arrow icons only
import { ArrowDown, ChevronRight } from "@lumora-app/supernova-ui/icons/arrows";

// Import chart icons only
import {
  BarChartCenter,
  LineChartLeft,
} from "@lumora-app/supernova-ui/icons/charts";

// Import generic icons only
import { Home, Settings, Heart } from "@lumora-app/supernova-ui/icons/generic";

Icon Props

All icons accept standard SVG props:

<ArrowDown
  className="w-8 h-8" // Tailwind classes
  width={32} // Custom width
  height={32} // Custom height
  fill="currentColor" // Fill color (default: currentColor)
  stroke="none" // Stroke color
  onClick={() => {}} // Event handlers
/>

📁 Icon Categories

| Category | Import Path | Description | | -------- | ---------------------------------------- | -------------------------------------------- | | Arrows | @lumora-app/supernova-ui/icons/arrows | Navigation arrows, chevrons, expand/collapse | | Charts | @lumora-app/supernova-ui/icons/charts | Bar charts, line charts, analytics | | Generic | @lumora-app/supernova-ui/icons/generic | Common UI icons (home, settings, etc.) |

📱 React Native Usage

This library also supports React Native via react-native-svg. Import from the /native path:

Prerequisites

Make sure you have react-native-svg installed in your React Native project:

npm install react-native-svg

Import native icons

import { ArrowDown, Home, Settings } from "@lumora-app/supernova-ui/native";

function App() {
  return (
    <View>
      <ArrowDown size={24} color="#000" />
      <Home size={24} color="blue" />
      <Settings size={32} color="#333" />
    </View>
  );
}

Import from specific categories

// Import arrow icons only
import {
  ArrowDown,
  ChevronRight,
} from "@lumora-app/supernova-ui/native/arrows";

// Import chart icons only
import {
  BarChartCenter,
  LineChartLeft,
} from "@lumora-app/supernova-ui/native/charts";

// Import generic icons only
import { Home, Settings, Heart } from "@lumora-app/supernova-ui/native/generic";

Native Icon Props

| Prop | Type | Default | Description | | ------- | -------- | ---------------- | ----------------- | | size | number | 24 | Icon size (w & h) | | color | string | "currentColor" | Icon fill color | | style | object | - | Additional styles |

🛠️ Development

# Clone the repository
git clone https://github.com/lumora-app/supernova-ui.git
cd supernova-ui
npm install

# Start development server
npm run dev

# Run Storybook
npm run storybook

# Build the library (output in dist/)
npm run build:lib

# Build static Storybook
npm run build-storybook

📄 Scripts

| Script | Description | | ------------------------- | ------------------------------------- | | npm run dev | Start Vite development server | | npm run storybook | Start Storybook on port 6006 | | npm run build:lib | Build the library for npm publishing | | npm run build-storybook | Build static Storybook | | npm run svg-to-react | Convert SVG files to React components |

📝 License

MIT