{"id":26321099,"url":"https://github.com/kartikbindra/adroit-ui","last_synced_at":"2026-02-03T15:06:59.419Z","repository":{"id":247146746,"uuid":"825122035","full_name":"kartikbindra/adroit-ui","owner":"kartikbindra","description":"AdroitUI - TailwindCSS Components UI Library","archived":false,"fork":false,"pushed_at":"2024-10-15T20:40:41.000Z","size":14477,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T10:51:16.558Z","etag":null,"topics":["clsx","cva","frontend","react","storybook","tailwindcss","twmerge","ui","ui-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/adroit-ui","language":"JavaScript","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/kartikbindra.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-07-06T20:58:21.000Z","updated_at":"2025-03-13T13:49:29.000Z","dependencies_parsed_at":"2024-08-09T22:46:27.074Z","dependency_job_id":"33633d6d-dff4-4771-bb24-8ea14aeee4e5","html_url":"https://github.com/kartikbindra/adroit-ui","commit_stats":null,"previous_names":["kartikbindra/adroit-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kartikbindra/adroit-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikbindra%2Fadroit-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikbindra%2Fadroit-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikbindra%2Fadroit-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikbindra%2Fadroit-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kartikbindra","download_url":"https://codeload.github.com/kartikbindra/adroit-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikbindra%2Fadroit-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29047807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T14:55:20.264Z","status":"ssl_error","status_checked_at":"2026-02-03T14:55:19.725Z","response_time":96,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["clsx","cva","frontend","react","storybook","tailwindcss","twmerge","ui","ui-library"],"created_at":"2025-03-15T16:16:18.932Z","updated_at":"2026-02-03T15:06:56.793Z","avatar_url":"https://github.com/kartikbindra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Adroit UI - Tailwind Components Library\n\n**Adroit UI** is a comprehensive Tailwind CSS component library designed to help you define and implement your own custom **design system** seamlessly. With **over 100 finely crafted and editable components**, Adroit UI eliminates the hassle of managing complex Tailwind CSS code, allowing you to focus on building stunning and consistent user interfaces.\n\nGithub: [Adroit UI](https://github.com/kartikbindra/adroit-ui)\n\nNPM Package: [adroit-ui](https://www.npmjs.com/package/adroit-ui)\n\n## Features\n\n- **Custom Design System**: Easily define and integrate your unique design system across your projects.\n- **Extensive Component Library**: Access a wide variety of over 100 meticulously designed components.\n- **Editable Components**: Tailor components to meet your specific needs without dealing with messy Tailwind code.\n- **Seamless Integration**: Integrate Adroit UI effortlessly into your existing projects for a cohesive design experience.\n\n## Getting Started\n\nTo get started with Adroit UI, follow these steps:\n\n1. ### **Install Adroit UI**: \n    Add Adroit UI to your project via npm or yarn.\n    ```bash\n    npm install adroit-ui\n    ```\n    or\n    ```bash\n    yarn add adroit-ui\n    ```\n\n2. ### **Configure Tailwind CSS**: \n    Ensure your Tailwind CSS configuration is set up to work with Adroit UI.\n\n* If TailwindCSS is not configured inside your project, then follow the [docs](tailwindcss.com/docs/) here or follow the steps below.\n\n* ### Install Tailwind CSS\n  Install `tailwindcss` and its peer dependencies via npm, and create your `tailwind.config.js` file.\n\n  ```terminal\n  npm install -D tailwindcss postcss autoprefixer\n  npx tailwindcss init -p\n  ```\n\n* Replace all the content inside `tailwind.config.js` file with the content below:\n  ```javascript \n  /** @type {import('tailwindcss').Config} */\n  export default {\n    content: [\"./src/**/*.{js,jsx,ts,tsx}\",\n      \"./node_modules/adroit-ui/dist/adroit-ui.js\"\n    ],\n    theme: {\n      extend: {\n        colors: {\n          transparent: 'transparent',\n          black: '#000',\n          white: '#fff',\n          neutral: {\n            1: '#fcfcfc',\n            2: '#f8f8f8',\n            3: '#f3f3f3',\n            4: '#ededed',\n            5: '#e8e8e8',\n            6: '#e2e2e2',\n            7: '#dbdbdb',\n            8: '#c7c7c7',\n            9: '#8f8f8f',\n            10: '#858585',\n            11: '#6f6f6f',\n            12: '#202020',\n          },\n          primary: {\n            1: '#fbfdff',\n            2: '#f5faff',\n            3: '#eaf6ff',\n            4: '#e1f0ff',\n            5: '#cee7fe',\n            6: '#b7d9f8',\n            7: '#96c7f2',\n            8: '#5eb0ef',\n            9: '#0091ff',\n            10: '#0081f1',\n            11: '#006adc',\n            12: '#00254d',\n          },\n          overlay: {\n            1: 'rgba(0, 0, 0, 0.01)',\n            2: 'rgba(0, 0, 0, 0.03)',\n            3: 'rgba(0, 0, 0, 0.05)',\n            4: 'rgba(0, 0, 0, 0.07)',\n            5: 'rgba(0, 0, 0, 0.09)',\n            6: 'rgba(0, 0, 0, 0.11)',\n            7: 'rgba(0, 0, 0, 0.14)',\n            8: 'rgba(0, 0, 0, 0.22)',\n            9: 'rgba(0, 0, 0, 0.44)',\n            10: 'rgba(0, 0, 0, 0.48)',\n            11: 'rgba(0, 0, 0, 0.56)',\n            12: 'rgba(0, 0, 0, 0.91)',\n          },\n          error: {\n            1: '#fffcfc',\n            2: '#fff8f8',\n            3: '#ffefef',\n            4: '#ffe5e5',\n            5: '#fdd8d8',\n            6: '#f9c6c6',\n            7: '#f3aeaf',\n            8: '#eb9091',\n            9: '#e5484d',\n            10: '#dc3d43',\n            11: '#cd2b31',\n            12: '#381316',\n          },\n          success: {\n            1: '#fbfefc',\n            2: '#f2fcf5',\n            3: '#e9f9ee',\n            4: '#ddf3e4',\n            5: '#ccebd7',\n            6: '#b4dfc4',\n            7: '#92ceac',\n            8: '#5bb98c',\n            9: '#30a46c',\n            10: '#299764',\n            11: '#18794e',\n            12: '#153226',\n          },\n          warning: {\n            1: '#FDFDF9',\n            2: '#FFFCE8',\n            3: '#FFFBD1',\n            4: '#FFF8BB',\n            5: '#FEF2A4',\n            6: '#F9E68C',\n            7: '#EFD36C',\n            8: '#EBBC00',\n            9: '#F5D90A',\n            10: '#F7CE00',\n            11: '#946800',\n            12: '#35290F',\n          },\n        },\n        borderRadius: {\n          none: '0',\n          xs: '4px',\n          sm: '8px',\n          DEFAULT: '0.25rem',\n          md: '16px',\n          lg: '24px',\n          xl: '32px',\n          '2xl': '48px',\n          full: '9999px',\n        },\n        fontFamily: {\n          montserrat: ['Montserrat', 'sans-serif'],\n        },\n        fontSize: {\n          xs: '12px',\n          sm: '14px',\n          md: '16px',\n          lg: '18px',\n          xl: '20px',\n          '2xl': '24px',\n          '3xl': '30px',\n          '4xl': '36px',\n          '5xl': '48px',\n          '6xl': '60px',\n          '7xl': '72px',\n        },\n        fontWeight:{\n          light: 300,\n          regular: 400,\n          medium: 500,\n          semibold: 600,\n          bold: 700,\n        },\n        blur: {\n          sm: '8px',\n          md: '16px',\n          lg: '24px',\n          xl: '40px',\n        },\n      }\n    },\n    plugins: [],\n  };\n  ```\n\n* ### Add the Tailwind directives to your CSS\n  Add the `@tailwind` **directives** for each of Tailwind’s layers and adroitUI's import to your main CSS file.\n\n  ```mian.css\n  @import \"../node_modules/adroit-ui/dist/style.css\";\n  @tailwind base;\n  @tailwind components;\n  @tailwind utilities;\n  ```\n\n3. **Import Components**: Import the components you need and start using them in your project.\n    ```javascript\n    import { Button } from 'adroit-ui';\n    ```\n\n4. **Customize Your Design System**: Leverage the flexibility of Adroit UI to customize and extend your design system inside `tailwind.config.js` file.\n\n## Button Component\nAdroit UI provides different variants of buttons that can be easily integrated in your projects.\n\n### Props -\n* ### Variants:\n    Use `variant` prop in the button component. Below are the values of `variant` prop:\n\n    `solid-primary`\n    `solid-secondary`\n    `solid-destructive`\n    `neutral-primary`\n    `neutral-secondary`\n    `outline-primary`\n    `outline-neutral`\n    `outline-destructive`\n\n* ### Sizes:\n    Use `size` prop in the button component. Below are the values of `size` prop:\n\n    `xs`\n    `sm`\n    `md`\n    `lg`\n    `xl`\n    `2xl`\n\n* ### Border Radius:\n    Use `radius` prop in the button component. Below are the values of `radius` prop:\n\n    `xs`\n    `sm`\n    `md`\n    `lg`\n    `xl`\n    `2xl`\n    `full`\n\n* ### Label Text:\n    Use `label` prop in the button component. Enter the text you want to show inside the button in `label` prop.\n\n* ### State:\n    Use `state` prop in the button component. Below are the values of `state` prop:\n\n    `default`\n    `disabled`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkartikbindra%2Fadroit-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkartikbindra%2Fadroit-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkartikbindra%2Fadroit-ui/lists"}