https://github.com/dkcodec/dkcodec-ui-kit
A modern and minimalist UI component library inspired by 2D design. Each component is designed with simplicity and elegance, making your application look sleek and user-friendly.
https://github.com/dkcodec/dkcodec-ui-kit
library npm npm-package react storybook ts ui-components ui-kit uikit
Last synced: 5 months ago
JSON representation
A modern and minimalist UI component library inspired by 2D design. Each component is designed with simplicity and elegance, making your application look sleek and user-friendly.
- Host: GitHub
- URL: https://github.com/dkcodec/dkcodec-ui-kit
- Owner: dkcodec
- Created: 2024-10-16T08:27:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-20T09:10:47.000Z (over 1 year ago)
- Last Synced: 2025-04-30T09:12:47.989Z (about 1 year ago)
- Topics: library, npm, npm-package, react, storybook, ts, ui-components, ui-kit, uikit
- Language: TypeScript
- Homepage:
- Size: 89.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UI Kit - 2D Components
A modern and minimalist UI component library inspired by 2D design. Each component is designed with simplicity and elegance, making your application look sleek and user-friendly.
## 🚀 Features
- **Minimalist Design**: All components are designed in a simple 2D style, perfect for modern web apps.
- **Customizable**: Easily tweak styles and settings to fit your brand.
- **Lightweight**: Optimized for performance, ensuring your app stays fast and responsive.
- **Accessible**: All components are built with accessibility in mind.
- **Responsive**: Components are fully responsive and adapt to all screen sizes.
## 📦 Installation
Install the UI Kit through npm:
```bash
npm install dkcodec-ui-kit
```
## 🖼️ Components
### Button2D, Toggle2D, Input2D
The `Button2D` component is a flexible and customizable button with several style options, built using React. It supports different sizes, colors, themes, and additional styles. Here's how to use it.
#### ✨ Features
- Customizable size: `'2xl' | 'xl' | 'lg' | 'md' | 'sm'`
- Supports light and dark themes
- Set custom text, button, background, and border colors
- Additional custom CSS classes can be applied
- Responsive and accessible
#### 📋 Props
| Prop | Type | Default | Description |
| -------------------- | ----------------------------------------------- | --------- | ------------------------------------------------------------------------- |
| `textColor` | `string` | `black` | Custom color for the button or toggle text |
| `btnColor` | `string` | `#e8e8e8` | Custom color for the button or toggle background (within the span) |
| `background` | `string` | `black` | Custom color for the overall button or toggle background |
| `borderColor` | `string` | `black` | Border color of the button |
| `size or toggleSize` | `'2xl' \| 'xl' \| 'lg' \| 'md' \| 'sm'` | `'md'` | Size of the button or toggle (affects padding and border radius) |
| `additionalClass` | `string` | `''` | Additional custom class to apply to the button's or toggle's root element |
| `...props` | `React.ButtonHTMLAttributes` | | Supports all native button or toggle attributes |
#### 📦 Example Usage
Here's how you can use the `Button2D` and `Toggle2D` components in your project:
```jsx
import React from 'react'
import { Button2D, Toggle2D, Input2D } from 'dkcodec-ui-kit'
const App = () => {
return (
{/* Basic button */}
Click me
{/* Custom button with size and colors */}
Custom Button
{/* Button with additional custom class */}
Small Button
{/* Toggle Button*/}
{/* Input */}
)
}
export default App
```
#### 🎨 Customization
You can customize the button or toggle by passing in props such as `size`, `textColor`, `btnColor`, and `background`. You can also add your own styles by passing an `additionalClass` for further styling via CSS.
For example:
```css
/* MyButton.css */
.my-custom-class {
border: 2px solid green;
font-weight: bold;
}
```
#### 🛠️ Available Sizes
- `2xl`: Very large button
- `xl`: Extra large button
- `lg`: Large button
- `md`: Medium button (default)
- `sm`: Small button
Each size option adjusts the button's or toggle's padding and border-radius to fit the design requirements.
#### 🚀 Performance Tips
- Avoid applying too many styles inline; prefer using classes when customizing heavily.
- Use the `size` prop to optimize spacing rather than adjusting margins manually.
## 🌐 Browser Support
UI Kit supports all modern browsers:
- Chrome
- Firefox
- Safari
- Edge
## 🛠️ Contributing
We welcome contributions! If you find any issues or want to add new features, feel free to open a pull request.
## 📄 License
This project is licensed under the ISC License.