{"id":25961702,"url":"https://github.com/ttab/elephant-ui","last_synced_at":"2026-05-21T16:45:31.663Z","repository":{"id":199643554,"uuid":"703071583","full_name":"ttab/elephant-ui","owner":"ttab","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-22T11:45:55.000Z","size":1348,"stargazers_count":0,"open_issues_count":9,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-05-22T12:48:38.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ttab.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":"2023-10-10T14:39:59.000Z","updated_at":"2024-06-03T16:50:27.428Z","dependencies_parsed_at":"2024-01-03T10:49:58.706Z","dependency_job_id":"c85d0753-3f34-4b4b-aa8e-3fc8e677b8bf","html_url":"https://github.com/ttab/elephant-ui","commit_stats":null,"previous_names":["ttab/elephant-ui"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Felephant-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Felephant-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Felephant-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Felephant-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ttab","download_url":"https://codeload.github.com/ttab/elephant-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241912994,"owners_count":20041457,"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":[],"created_at":"2025-03-04T19:41:01.576Z","updated_at":"2026-05-21T16:45:31.658Z","avatar_url":"https://github.com/ttab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ElephantUI\n\n## Usage\n\nSee contents of the directory `src/components/ui` for available components.\n\nSee [shadcn/UI documentation](https://ui.shadcn.com/docs/components/) for usage of available components — or when necessary the local showroom possibilities as described below.\n\nInstall in your project using `npm i @ttab/elephant-ui`\n\n## Build styles\n\nIn the project in which you are using `elephant-ui` add the following:\n\n`vite.config.ts`\n\n```js\n    plugins: [\n      viteStaticCopy({\n        targets: [\n          {\n            src: './node_modules/@ttab/elephant-ui/dist/styles/**/*.{woff,woff2}',\n            dest: './assets'\n          }\n        ]\n      }),\n      react(),\n      tailwindcss()\n    ],\n```\n\nVite plugin `tailwindcss()` will handle the build of the tailwind styles. With HMR during development.\n\n`\u003cprojext\u003e/index.css`\n\n```css\n@import \"tailwindcss\";\n@import '@ttab/elephant-ui/styles/index.css';\n\n/* Define other packages from which classes should be included in the final CSS */\n@source \"../node_modules/@ttab/elephant-ui\";\n@source \"../node_modules/@ttab/textbit\";\n\n/* Define fonts and paths */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(/elephant/assets/inter-latin-300-normal.woff2) format('woff2'), url(/elephant/assets/inter-latin-300-normal.woff) format('woff');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n```\n\n`\u003cproject\u003e/App.tsx` or equivalent entry point\n\n```js\nimport './index.css'\n\n```\n\nThis will import the needed base styles from `elephant-ui` and prepare for the tailwind build.\n\nSee complete usage in `elephant-chrome` repo.\n\n## Import\n\n```typescript\n// Components\nimport { Button } from '@ttab/elephant-ui'\n// Icons\nimport { Waves } from '@ttab/elephant-ui/icons'\n// Utils\nimport { cn } from '@ttab/elephant-ui/lib/utils'\n```\n\n## Icons\n\nIcons are from [lucide-react](https://lucide.dev/icons/).\n\n## Adding additional components\n\nSee available components at [shadcn/UI documentation](https://ui.shadcn.com/docs/components/).\n\n1. Use for example `npx shadcn-ui@latest add accordion` to add an accordion.\n2. Open the `src/components/ui/accordion.tsx` file and change import of `cn` to be `import { cn } from \"@/lib/utils\"`.\n\n## Showcasing components during development\n\nAdd component examples and usage in `src/showroom/components` and import into ``src/showroom/app.tsx`.\n\nRun `npm run dev` and open given url in your local browser to see example of how we could have a local testbed while developing.\n\n_This might not be necessary unless we change the shadcn/ui default code/usage. And on the other hand it might not be sufficient in the future..._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttab%2Felephant-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fttab%2Felephant-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttab%2Felephant-ui/lists"}