# ui-kit-15

> a ui library

Latest version **1.0.56** (published 2025-03-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install ui-kit-15
pnpm add ui-kit-15
yarn add ui-kit-15
bun add ui-kit-15
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.56 |
| Published | 2025-03-15 |
| First published | 2024-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Viahwas Singh |
| Maintainers | vishwas1724 |

## Links

- npm: https://www.npmjs.com/package/ui-kit-15
- npm.io page: https://npm.io/package/ui-kit-15

## Dependencies (5)

- [gsap](https://npm.io/package/gsap.md) ^3.12.5
- [three](https://npm.io/package/three.md) ^0.169.0
- [@react-three/drei](https://npm.io/package/@react-three/drei.md) ^9.114.6
- [@react-three/fiber](https://npm.io/package/@react-three/fiber.md) ^8.17.10
- [@react-three/cannon](https://npm.io/package/@react-three/cannon.md) ^6.6.0

## Recent versions

- 1.0.56 (latest) — 2025-03-15
- 1.0.55 — 2025-03-15
- 1.0.54 — 2025-03-13
- 1.0.53 — 2025-03-13
- 1.0.52 — 2025-03-13
- 1.0.51 — 2025-03-13
- 1.0.50 — 2025-03-13
- 1.0.49 — 2025-01-07
- 1.0.48 — 2025-01-07
- 1.0.47 — 2025-01-07
- 1.0.46 — 2025-01-07
- 1.0.45 — 2025-01-04
- 1.0.44 — 2025-01-04
- 1.0.43 — 2024-12-19
- 1.0.42 — 2024-12-18
- … 34 more at https://npm.io/package/ui-kit-15/versions

## README

# UI-Kit-15

A comprehensive UI component library that provides a wide variety of components for building modern React applications. With a focus on both UI elements and 3D graphics, `ui-kit-15` includes basic components like buttons, inputs, and alerts, as well as advanced 3D components using `react-three-fiber`. This package is perfect for developers who want an easy-to-use and visually appealing UI library with 3D capabilities.

## Features

- **Basic UI Components**: Buttons, Dropdowns, Alerts, Inputs, Tabs, etc.
- **Advanced 3D Elements**: SpinningCube, ColorSphere, RotatingEarth, and more.
- **Dark Mode Support**: Easily toggle between light and dark themes.
- **Interactive UI Elements**: Accordion, Tooltip, Modal, and more.
- **3D Graphics with React Three Fiber**: Provides stunning 3D components for your application.

## Installation

You can install `ui-kit-15` using npm:

```bash
npm install ui-kit-15
```

## Usage Examples

Here are examples of how to use each component from the library.


## Installation  

```bash
npm install ui-kit-15
```  

---

## 🚀 Components 

### **RubiksCubeScene**  
```jsx
import { RubiksCubeScene } from 'ui-kit-15';

const App = () => <RubiksCubeScene />;
export default App;
```

### **RotatingEarth**  
```jsx
import { RotatingEarth } from 'ui-kit-15';

const App = () => <RotatingEarth />;
export default App;
```

### **MagicMarble**  
```jsx
import MagicMarble from './components/MagicMarble';

const App = () => <MagicMarble />;
export default App;
```

### **WaveyImage**  
```jsx
import { WaveyImage } from 'ui-kit-15';

const App = () => <WaveyImage imageUrl="image_url" />;
export default App;
```

### **ImageEffects**  
```jsx
import { ImageEffects } from 'ui-kit-15';

const App = () => <ImageEffects imageSrc="image_url" effect={10} />;
export default App;
```

### **Image UnrollEffect**  
```jsx
import { UnrollEffect } from 'ui-kit-15';

const App = () => <UnrollEffect imageUrl="image_url" />;
export default App;
```

### **Slime**  
```jsx
import { SlimeComponent } from 'ui-kit-15';

const App = () => <SlimeComponent />;
export default App;
```

### **SpinningCube**  
```jsx
import { SpinningCube } from 'ui-kit-15';

const App = () => <SpinningCube size={2} color="blue" />;
export default App;
```

### **ColorSphere**  
```jsx
import { ColorSphere } from 'ui-kit-15';

const App = () => <ColorSphere />;
export default App;
```

---

## ⚡ UI Components  

### **Button**  
```jsx
import { Button } from 'ui-kit-15';

const App = () => <Button onClick={() => alert('Clicked!')}>Click Me</Button>;
export default App;
```

### **Modal**  
```jsx
import { Modal, Button } from 'ui-kit-15';
import { useState } from 'react';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="My Modal">
        Modal Content Here
      </Modal>
    </>
  );
};

export default App;
```

### **Tooltip**  
```jsx
import { Tooltip } from 'ui-kit-15';

const App = () => (
  <Tooltip content="Tooltip Info">
    <button>Hover Me</button>
  </Tooltip>
);

export default App;
```

### **DarkModeToggle**  
```jsx
import { DarkModeToggle } from 'ui-kit-15';

const App = () => <DarkModeToggle />;
export default App;
```

### **Table**  
```jsx
import { Table } from 'ui-kit-15';

const data = [{ name: 'John', age: 25, city: 'NY' }];
const App = () => <Table data={data} columns={['name', 'age', 'city']} />;
export default App;
```

### **Card**  
```jsx
import { Card } from 'ui-kit-15';

const App = () => <Card title="Card Title" content="Card Content" />;
export default App;
```

### **Dropdown**  
```jsx
import { Dropdown } from 'ui-kit-15';

const App = () => (
  <Dropdown
    label="Select an option"
    options={['Option 1', 'Option 2']}
    onSelect={(value) => alert(value)}
  />
);

export default App;
```

### **Accordion**  
```jsx
import { Accordion } from 'ui-kit-15';

const items = [{ title: 'Item 1', content: 'Content' }];
const App = () => <Accordion items={items} />;
export default App;
```

### **Tabs**  
```jsx
import { Tabs } from 'ui-kit-15';

const tabs = [{ id: 'tab1', title: 'Tab 1', content: 'Tab Content' }];
const App = () => <Tabs tabs={tabs} />;
export default App;
```

### **Input**  
```jsx
import { Input } from 'ui-kit-15';

const App = () => <Input type="text" placeholder="Type Here" />;
export default App;
```

### **Badge**  
```jsx
import { Badge } from 'ui-kit-15';

const App = () => <Badge text="New" />;
export default App;
```

### **Alert**  
```jsx
import { Alert } from 'ui-kit-15';

const App = () => <Alert message="This is an alert" type="warning" />;
export default App;
```

### **LoadingSpinnerWithStyles**  
```jsx
import { LoadingSpinnerWithStyle } from 'ui-kit-15';

const App = () => <LoadingSpinnerWithStyle color="blue" />;
export default App;
```

---

## 📜 License  
This project is licensed under the **ISC License**.  
```

---
_Source: https://npm.io/package/ui-kit-15 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._