Lumiere UI Library

A customizable React UI component library built on top of the shadcn UI, offering a variety of reusable components to help you build modern web applications quickly.

Installation

First, install the library:

npm install lumiere-ui
# or
yarn add lumiere-ui


Components

This library provides several UI components, including:

    Button
    Accordion
    Alert
    AlertDialog
    Switch

Usage

Below are examples of how to use each component in your project.

Button

A simple button component that supports variants like primary, secondary, etc.

import "lumiere-ui/dist/style.css";
import { Button, buttonVariants } from "lumiere-ui";

function App() {
  return (
    <div>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
    </div>
  );
}


Accordion

Create expandable/collapsible sections using the Accordion component.

import "lumiere-ui/dist/style.css";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "lumiere-ui";

function App() {
  return (
    <Accordion>
      <AccordionItem>
        <AccordionTrigger>Section 1</AccordionTrigger>
        <AccordionContent>This is the content of section 1.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Section 2</AccordionTrigger>
        <AccordionContent>This is the content of section 2.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}


Alert

Display important messages to users with the Alert component.

import "lumiere-ui/dist/style.css";
import { Alert, AlertTitle, AlertDescription } from "lumiere-ui";

function App() {
  return (
    <Alert>
      <AlertTitle>Warning!</AlertTitle>
      <AlertDescription>
        This is a warning message. Please take action.
      </AlertDescription>
    </Alert>
  );
}


AlertDialog

Use the AlertDialog component to display modal dialogs that can contain additional actions like canceling or confirming.

import "lumiere-ui/dist/style.css";
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogCancel,
  AlertDialogAction,
} from "lumiere-ui";

function App() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete Item</AlertDialogTitle>
        </AlertDialogHeader>
        <AlertDialogDescription>
          Are you sure you want to delete this item? This action cannot be undone.
        </AlertDialogDescription>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}


Switch

A simple switch component to toggle between on/off states.

import "lumiere-ui/dist/style.css";
import { Switch } from "lumiere-ui";

function App() {
  return <Switch />;
}


Customization

Each component supports customization via props, allowing you to adjust styles, variants, and behavior to fit your design system.

For example, with the Button component, you can pass a variant prop to apply different styles:

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>


License

This library is licensed under the MIT License.


This `README.md` provides installation instructions, component usage examples, and basic customization options for each component in your library. Let me know if you'd like further adjustments or details!