Lumora's icon library and UI components
npm install @lumora-app/supernova-uiSupernova 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.
---
- React
- TypeScript
- Vite
- Tailwind CSS
- Storybook
---
``bash`
npm install @lumora-app/supernova-ui
---
`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 installStart development server
npm run devRun Storybook
npm run storybookBuild the library (output in dist/)
npm run build:libBuild 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 |---
MIT