ui-kit-15

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:

npm install ui-kit-15

Usage Examples

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

Installation

npm install ui-kit-15

---

Components

RubiksCubeScene

import { RubiksCubeScene } from 'ui-kit-15';

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

RotatingEarth

import { RotatingEarth } from 'ui-kit-15';

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

MagicMarble

import MagicMarble from './components/MagicMarble';

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

WaveyImage

import { WaveyImage } from 'ui-kit-15';

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

ImageEffects

import { ImageEffects } from 'ui-kit-15';

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

Image UnrollEffect

import { UnrollEffect } from 'ui-kit-15';

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

Slime

import { SlimeComponent } from 'ui-kit-15';

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

SpinningCube

import { SpinningCube } from 'ui-kit-15';

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

ColorSphere

import { ColorSphere } from 'ui-kit-15';

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

---

UI Components

Button

import { Button } from 'ui-kit-15';

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

Modal

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

import { Tooltip } from 'ui-kit-15';

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

export default App;

DarkModeToggle

import { DarkModeToggle } from 'ui-kit-15';

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

Table

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

import { Card } from 'ui-kit-15';

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

Dropdown

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

import { Accordion } from 'ui-kit-15';

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

Tabs

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

import { Input } from 'ui-kit-15';

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

Badge

import { Badge } from 'ui-kit-15';

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

Alert

import { Alert } from 'ui-kit-15';

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

LoadingSpinnerWithStyles

import { LoadingSpinnerWithStyle } from 'ui-kit-15';

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

---

License

This project is licensed under the ISC License.