open-index/open-npm huggingface dataset:
npm package: @rgldev25/lumio-ui
Description: This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
Latest version: 0.1.7

# Lumio UI Components

This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Components

Lumio provides a set of customizable UI components built with React and Tailwind CSS.

### Button
```tsx
import { Button } from "@/components";

// Variants: primary, secondary, success, danger, gradient, black
<Button variant="primary" size="md">Submit</Button>
```

## Toggle
import { Toggle } from "@/components";

```tsx
<Toggle 
  checked={isChecked}
  onChange={handleChange}
  variant="primary"
  size="md"
/>
```

## Dropdown
```tsx
import { Dropdown } from "@/components";

const options = [
  { value: "option1", label: "Option 1" },
  { value: "option2", label: "Option 2" }
];

<Dropdown
  options={options}
  value={selectedValue}
  onChange={setValue}
  label="Dropdown Example"
  variant="primary"
/>
```

## Progress
```tsx
import { Progress } from "@/components";

// Bar Progress
<Progress 
  value={75}
  variant="primary"
  type="bar"
  showValue
  animated
/>

// Circular Progress
<Progress 
  value={75}
  variant="primary"
  type="circular"
  showValue
/>
```

## Pagination
```tsx
import { Pagination } from "@/components";

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={setCurrentPage}
  variant="primary"
  size="md"
/>
```

### Common Props
All components support these common properties:

- variant : 'primary' | 'secondary' | 'success' | 'danger' | 'black' | 'gradient' (Button & Progress only)
- size : 'sm' | 'md' | 'lg'
- disabled : boolean
- className : string (for custom styling)

## Getting Started
First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx . The page auto-updates as you edit the file.

## Learn More
To learn more about Next.js, take a look at the following resources:

- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.