🌟 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

``bash
npm install @lumora-app/supernova-ui
`

---

🚀 Usage

$3

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

function App() {
return (



);
}
`

$3

`tsx
// 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";
`

$3

All icons accept standard SVG props:

`tsx
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:

$3

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

`bash
npm install react-native-svg
`

$3

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

function App() {
return (





);
}
`

$3

`tsx
// 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";
`

$3

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

---

🛠️ Development

`bash


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