Losa-UI

A custom UI component library inspired by Lost Saga's game interface design. Features gradient buttons, custom CSS variables, and a game-inspired design system.

Installation

npm install losa-ui

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom tailwindcss

Setup

1. Import the styles

Add the following to your main CSS file or app entry point:

import 'losa-ui/styles';

Or in your CSS:

@import 'losa-ui/styles';

2. Configure Tailwind CSS

Make sure your tailwind.config.js includes the losa-ui components:

module.exports = {
  content: [
    // ... your files
    './node_modules/losa-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // losa-ui uses CSS variables, extend as needed
    },
  },
};

Usage

Import components

import { Button, Card, ItemCard, cn } from 'losa-ui';

Button

import { Button } from 'losa-ui';

// Default button
<Button>Click me</Button>

// Variants
<Button variant="blue">Blue Button</Button>
<Button variant="green">Green Button</Button>
<Button variant="red">Red Button</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// With icons
<Button iconLeft={<Icon />}>With Icon</Button>
<Button iconRight={<Icon />}>With Icon</Button>

// Loading state
<Button isLoading>Loading...</Button>

Card Components

import { Card, CardHeader, CardTitle, CardContent, CardFooter, ItemCard } from 'losa-ui';

// Basic Card
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>Content here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>

// Item Card (game item style)
<ItemCard
  name="Epic Sword"
  price="1000 Gold"
  image="/path/to/image.png"
  rarity="unique"
  onBuy={() => console.log('Buy clicked')}
/>

Form Components

import { Input, Textarea, Checkbox, Select } from 'losa-ui';

<Input placeholder="Enter text..." />
<Textarea placeholder="Enter description..." />
<Checkbox checked={true} />

Dialog & Modal

import { Dialog, Modal } from 'losa-ui';

// Dialog
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <DialogContent_body>Content here</DialogContent_body>
    <DialogFooter>
      <Button>Close</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

// Modal
<Modal isOpen={isOpen} onClose={handleClose}>
  <ModalHeader>Title</ModalHeader>
  <ModalBody>Content</ModalBody>
  <ModalFooter>
    <Button onClick={handleClose}>Close</Button>
  </ModalFooter>
</Modal>

Navigation

import { Navbar, Nav, Footer } from 'losa-ui';

<Navbar logo="/logo.png" items={navItems} />
<Footer />

Theme Toggle

import { ThemeProvider, ThemeToggle } from 'losa-ui';

// Wrap your app with ThemeProvider
<ThemeProvider>
  <YourApp />
  <ThemeToggle />
</ThemeProvider>

Components List

• Layout: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
• Buttons: Button (with variants: default, blue, green, red)
• Form: Input, Textarea, Checkbox, Select, Switch, Slider, Calendar
• Display: Badge, Avatar, Alert, Progress, Skeleton, Table
• Overlay: Dialog, Modal, Drawer, Sheet, Popover, Tooltip, HoverCard
• Navigation: Navbar, Nav, Footer, Breadcrumb, Pagination, Tabs
• Feedback: Toast, Sonner, AlertDialog, Progress
• Data: Chart, Carousel
• Game-specific: ItemCard, NewsCard, RankEntry, DriverCard, HeroCard, Headbox, Stage

CSS Variables

Losa-UI uses CSS custom properties for theming. The following variables are available:

/* Light theme (default) */
--ls-container-bg: #f4f4f4;
--ls-card-bg: #f8f8f8;
--ls-card-border: #d0d0d0;
--ls-card-shadow: 0 2px 4px rgba(0,0,0,0.1);
--ls-text-primary: #333;
--ls-text-extreme: #111;
--ls-menu-link: #555;
--ls-btn-border: #bbb;
/* ... and more */

/* Dark theme */
.dark {
  --ls-container-bg: #2a2a2a;
  --ls-card-bg: #333;
  --ls-text-primary: #e0e0e0;
  /* ... and more */
}

Utility Functions

cn() - Class name merger

import { cn } from 'losa-ui';

const className = cn(
  'base-classes',
  isActive && 'active-classes',
  'conditional-classes'
);

License

MIT