{"id":17602356,"url":"https://github.com/dkcodec/dkcodec-ui-kit","last_synced_at":"2026-01-31T08:32:32.144Z","repository":{"id":258285057,"uuid":"873474442","full_name":"dkcodec/Dkcodec-ui-kit","owner":"dkcodec","description":"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.","archived":false,"fork":false,"pushed_at":"2024-10-20T09:10:47.000Z","size":92,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T09:12:47.989Z","etag":null,"topics":["library","npm","npm-package","react","storybook","ts","ui-components","ui-kit","uikit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dkcodec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-16T08:27:15.000Z","updated_at":"2024-10-20T09:10:52.000Z","dependencies_parsed_at":"2024-10-23T05:35:17.551Z","dependency_job_id":null,"html_url":"https://github.com/dkcodec/Dkcodec-ui-kit","commit_stats":null,"previous_names":["dkcodec/dkcodec-ui-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dkcodec/Dkcodec-ui-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkcodec%2FDkcodec-ui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkcodec%2FDkcodec-ui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkcodec%2FDkcodec-ui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkcodec%2FDkcodec-ui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dkcodec","download_url":"https://codeload.github.com/dkcodec/Dkcodec-ui-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkcodec%2FDkcodec-ui-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262166179,"owners_count":23268995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library","npm","npm-package","react","storybook","ts","ui-components","ui-kit","uikit"],"created_at":"2024-10-22T13:08:01.256Z","updated_at":"2026-01-31T08:32:32.110Z","avatar_url":"https://github.com/dkcodec.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI Kit - 2D Components\r\n\r\nA 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.\r\n\r\n## 🚀 Features\r\n\r\n- **Minimalist Design**: All components are designed in a simple 2D style, perfect for modern web apps.\r\n- **Customizable**: Easily tweak styles and settings to fit your brand.\r\n- **Lightweight**: Optimized for performance, ensuring your app stays fast and responsive.\r\n- **Accessible**: All components are built with accessibility in mind.\r\n- **Responsive**: Components are fully responsive and adapt to all screen sizes.\r\n\r\n## 📦 Installation\r\n\r\nInstall the UI Kit through npm:\r\n\r\n```bash\r\nnpm install dkcodec-ui-kit\r\n```\r\n\r\n## 🖼️ Components\r\n\r\n### Button2D, Toggle2D, Input2D\r\n\r\nThe `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.\r\n\r\n#### ✨ Features\r\n\r\n- Customizable size: `'2xl' | 'xl' | 'lg' | 'md' | 'sm'`\r\n- Supports light and dark themes\r\n- Set custom text, button, background, and border colors\r\n- Additional custom CSS classes can be applied\r\n- Responsive and accessible\r\n\r\n#### 📋 Props\r\n\r\n| Prop                 | Type                                            | Default   | Description                                                               |\r\n| -------------------- | ----------------------------------------------- | --------- | ------------------------------------------------------------------------- |\r\n| `textColor`          | `string`                                        | `black`   | Custom color for the button or toggle text                                |\r\n| `btnColor`           | `string`                                        | `#e8e8e8` | Custom color for the button or toggle background (within the span)        |\r\n| `background`         | `string`                                        | `black`   | Custom color for the overall button or toggle background                  |\r\n| `borderColor`        | `string`                                        | `black`   | Border color of the button                                                |\r\n| `size or toggleSize` | `'2xl' \\| 'xl' \\| 'lg' \\| 'md' \\| 'sm'`         | `'md'`    | Size of the button or toggle (affects padding and border radius)          |\r\n| `additionalClass`    | `string`                                        | `''`      | Additional custom class to apply to the button's or toggle's root element |\r\n| `...props`           | `React.ButtonHTMLAttributes\u003cHTMLButtonElement\u003e` |           | Supports all native button or toggle attributes                           |\r\n\r\n#### 📦 Example Usage\r\n\r\nHere's how you can use the `Button2D` and `Toggle2D` components in your project:\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { Button2D, Toggle2D, Input2D } from 'dkcodec-ui-kit'\r\n\r\nconst App = () =\u003e {\r\n  return (\r\n    \u003cdiv\u003e\r\n      {/* Basic button */}\r\n      \u003cButton2D\u003eClick me\u003c/Button2D\u003e\r\n\r\n      {/* Custom button with size and colors */}\r\n      \u003cButton2D\r\n        size='lg'\r\n        textColor='darkblue'\r\n        btnColor='lightblue'\r\n        borderColor='blue'\r\n        background='darkblue'\r\n      \u003e\r\n        Custom Button\r\n      \u003c/Button2D\u003e\r\n\r\n      {/* Button with additional custom class */}\r\n      \u003cButton2D size='sm' additionalClass='my-custom-class'\u003e\r\n        Small Button\r\n      \u003c/Button2D\u003e\r\n\r\n      {/* Toggle Button*/}\r\n      \u003cToggle2D toggleSize='xl' /\u003e\r\n\r\n      {/* Input */}\r\n      \u003cInput2D inputSize='xl'\u003e\r\n    \u003c/div\u003e\r\n  )\r\n}\r\n\r\nexport default App\r\n```\r\n\r\n#### 🎨 Customization\r\n\r\nYou 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.\r\n\r\nFor example:\r\n\r\n```css\r\n/* MyButton.css */\r\n.my-custom-class {\r\n  border: 2px solid green;\r\n  font-weight: bold;\r\n}\r\n```\r\n\r\n#### 🛠️ Available Sizes\r\n\r\n- `2xl`: Very large button\r\n- `xl`: Extra large button\r\n- `lg`: Large button\r\n- `md`: Medium button (default)\r\n- `sm`: Small button\r\n\r\nEach size option adjusts the button's or toggle's padding and border-radius to fit the design requirements.\r\n\r\n#### 🚀 Performance Tips\r\n\r\n- Avoid applying too many styles inline; prefer using classes when customizing heavily.\r\n- Use the `size` prop to optimize spacing rather than adjusting margins manually.\r\n\r\n## 🌐 Browser Support\r\n\r\nUI Kit supports all modern browsers:\r\n\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n- Edge\r\n\r\n## 🛠️ Contributing\r\n\r\nWe welcome contributions! If you find any issues or want to add new features, feel free to open a pull request.\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the ISC License.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdkcodec%2Fdkcodec-ui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdkcodec%2Fdkcodec-ui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdkcodec%2Fdkcodec-ui-kit/lists"}