{"id":18375841,"url":"https://github.com/apideck-libraries/components","last_synced_at":"2025-04-06T20:31:15.142Z","repository":{"id":38383969,"uuid":"346099340","full_name":"apideck-libraries/components","owner":"apideck-libraries","description":"The Apideck component library","archived":false,"fork":false,"pushed_at":"2024-02-21T12:20:34.000Z","size":3197,"stargazers_count":5,"open_issues_count":27,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-22T06:27:20.929Z","etag":null,"topics":["react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://developers.apideck.com/components","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apideck-libraries.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-03-09T18:07:33.000Z","updated_at":"2023-05-24T17:21:56.000Z","dependencies_parsed_at":"2023-02-16T22:31:42.574Z","dependency_job_id":"42b3a902-db53-4762-b807-e50e2df84515","html_url":"https://github.com/apideck-libraries/components","commit_stats":{"total_commits":321,"total_committers":4,"mean_commits":80.25,"dds":0.06853582554517135,"last_synced_commit":"764ac1ce2d68eb1b4882669e90bf3683318fc6ee"},"previous_names":["apideck-io/components"],"tags_count":135,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apideck-libraries","download_url":"https://codeload.github.com/apideck-libraries/components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247547322,"owners_count":20956534,"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":["react","tailwindcss","typescript"],"created_at":"2024-11-06T00:20:39.394Z","updated_at":"2025-04-06T20:31:14.463Z","avatar_url":"https://github.com/apideck-libraries.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Apideck Component Library\n\nAn open-source UI component library for the efficient development of beautiful React applications.\n\nGo to [developers.apideck.com/components](https://developers.apideck.com/components) for the full documentation.\n\n## Usage\n\nInstall the component library\n\n```sh\nyarn add @apideck/components\n```\n\nThe styles are scoped to the `apideck` class name so add it to the top-level parent or body tag.\n\n```tsx\nimport { ModalProvider, ToastProvider } from '@apideck/components'\nimport { AppProps } from 'next/app'\n\nconst App = ({ Component, pageProps }: AppProps) =\u003e {\n  return (\n    \u003cdiv className=\"apideck\"\u003e\n      \u003cModalProvider\u003e\n        \u003cToastProvider\u003e{children}\u003c/ToastProvider\u003e\n      \u003c/ModalProvider\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\nUse components inside your project:\n\n```js\nimport { Button } from '@apideck/components'\n\nconst App = () =\u003e {\n  return \u003cButton variant=\"primary\" size=\"large\" text=\"Yo, world!\" /\u003e\n}\n\nexport default App\n```\n\nIf you are **NOT** using Tailwind CSS in your project, make sure to include the styles in your project:\n\n```js\nimport '@apideck/components/dist/styles.css'\n```\n\nThe components library is styled using [Tailwind CSS](https://tailwindcss.com/). If you were to use it in a project that also uses Tailwind CSS, you do not have to include the `styles.css` file but you should include the package path in the content path of the `tailwind.config.js`.\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n  content: ['./node_modules/@apideck/components/**/*.js'],\n  ...\n}\n```\n\nIf want to overwrite the primary color you can add your custom colors to the `primary` color option inside your Tailwind configuration:\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n  content: ['./node_modules/@apideck/components/**/*.js'],\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          50:  '#faf6f9',\n          100: '#fae7f7',\n          200: '#f5c4f3',\n          300: '#f39dee',\n          400: '#f469e7',\n          500: '#f53fe1',\n          600: '#e909ef',\n          700: '#c81ead',\n          800: '#9c1a81',\n          900: '#7c1762',\n        }\n      }\n    }\n  }\n  ...\n}\n```\n\n### Components\n\n- [Button](https://developers.apideck.com/components/button)\n- [Card](https://developers.apideck.com/components/card)\n- [CheckBox](https://developers.apideck.com/components/checkbox)\n- [DateInput](https://developers.apideck.com/components/dateinput)\n- [Dropdown](https://developers.apideck.com/components/dropdown)\n- [Modal](https://developers.apideck.com/components/modal)\n- [Select](https://developers.apideck.com/components/select)\n- [TextArea](https://developers.apideck.com/components/textarea)\n- [TextInput](https://developers.apideck.com/components/textinput)\n- [Toast](https://developers.apideck.com/components/toast)\n- [Toggle](https://developers.apideck.com/components/toggle)\n- [Tooltip](https://developers.apideck.com/components/tooltip)\n\n### Utils\n\n- `useModal` and `ModalProvider`\n- `useToast` and `ToastProvider`\n- `useOutsideClick`\n- `usePrevious`\n- `useDebounce`\n\nPlease refer to the [Apideck docs](https://developers.apideck.com/components) for the full documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapideck-libraries%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapideck-libraries%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapideck-libraries%2Fcomponents/lists"}