{"id":13564921,"url":"https://github.com/supabase/ui","last_synced_at":"2025-04-07T16:16:10.341Z","repository":{"id":37937183,"uuid":"320544192","full_name":"supabase/ui","owner":"supabase","description":"Supabase UI Library","archived":false,"fork":false,"pushed_at":"2024-03-27T07:55:28.000Z","size":13477,"stargazers_count":1581,"open_issues_count":4,"forks_count":156,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-01-13T17:59:39.572Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"ui-storybook-pre-release.vercel.app","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/supabase.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},"funding":{"github":["supabase"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-12-11T10:41:08.000Z","updated_at":"2025-01-11T16:24:53.000Z","dependencies_parsed_at":"2024-04-12T08:21:24.128Z","dependency_job_id":"faaf67b7-185b-4934-9d69-81238eb4656c","html_url":"https://github.com/supabase/ui","commit_stats":{"total_commits":517,"total_committers":43,"mean_commits":"12.023255813953488","dds":0.460348162475822,"last_synced_commit":"989b9ed73fa773e50798638ee75aa4c42a45d1e0"},"previous_names":[],"tags_count":206,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supabase%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supabase%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supabase%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supabase%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/supabase","download_url":"https://codeload.github.com/supabase/ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247676371,"owners_count":20977508,"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":"2024-08-01T13:01:37.962Z","updated_at":"2025-04-07T16:16:10.311Z","avatar_url":"https://github.com/supabase.png","language":"TypeScript","funding_links":["https://github.com/sponsors/supabase"],"categories":["TypeScript","CSS 相关"],"sub_categories":[],"readme":"# Supabase UI\n\nSupabase UI is a React UI library.\n\n---\n\n## Supabase UI is being deprecated. \n\nWe are moving the components to the main mono repo at [github.com/supabase/supabase](https://github.com/supabase/supabase).\n\nThe auth component has been moved to it's own repo and package.\n[github.com/supabase-community/auth-ui](https://github.com/supabase-community/auth-ui).\nYou can also read the [docs for auth ui here](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui).\n\n---\n\n~~### ⚠️ Development is currently being worked on in [alpha](https://github.com/supabase/ui/tree/alpha) branch~~\n\n~~Supabase UI will be using tailwind css classes and dropping support for CSS modules is in the alpha branch.~~\n~~This UI library will exclusively need to be used with tailwind.~~\n\n~~The Auth component will be moved over to [@supabase/auth-helpers](https://github.com/supabase-community/supabase-auth-helpers).~~\n\n\n---\n\n🚧  Supabase UI is still a work-in-progress until a major release is published.\n\n[![Product hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=290768\u0026theme=light)](https://www.producthunt.com/posts/supabase-ui)\n\n\n[View docs](https://ui.supabase.com)\n\n---\n\n## Install Supabase UI\n\n```cli\nnpm install @supabase/ui\n```\n\n## Using Supabase UI\n\nExample of importing a component\n\n```js\nimport { Button } from '@supabase/ui'\n\n//...\n\nreturn \u003cButton\u003eI am a Supabase UI button\u003c/Button\u003e\n```\n\nIt is probably advisable to use [Normalize](https://github.com/sindresorhus/modern-normalize) with Supabase UI for the timebeing.\n\n## Using Icons\n\nWe use [Feather icon library](https://feathericons.com/) in Supabase UI\n\nYou can use any Icon from the library as a component by prepending `Icon` to any Icon name, like, `\u003cIconMail\u003e`\n\n```js\nimport { IconMail } from '@supabase/ui'\n\n//...\n\nreturn \u003cIconMail size=\"small\" /\u003e\n```\n\n## Using Supabase UI Auth\n\nYou can use our Auth widget straight out the box with Supabase auth including social logins.\n\n\u003cimg width=\"380\" alt=\"Screenshot 2021-02-05 at 19 25 01\" src=\"https://user-images.githubusercontent.com/8291514/107029572-32f72d00-67ea-11eb-982e-e737f052eea1.png\"\u003e\n\n\nThe Auth component also includes a context component which detects whether a user is logged in or not.\n\nMake sure to also install `@supabase/supabase-js`\n\n```cli\nnpm install @supabase/supabase-js\n```\n\nYou can then easily import `Auth` from the ui library and pass the `createClient` to the `Auth` component.\n\n```js\nimport { Auth, Typography, Button } from \"@supabase/ui\";\nimport { createClient } from \"@supabase/supabase-js\";\n\nconst { Text } = Typography\n\n// Create a single supabase client for interacting with your database\nconst supabase = createClient(\n  \"https://xyzcompany.supabase.co\",\n  \"public-anon-key\"\n);\n\nconst Container = (props) =\u003e {\n  const { user } = Auth.useUser();\n  if (user)\n    return (\n      \u003c\u003e\n        \u003cText\u003eSigned in: {user.email}\u003c/Text\u003e\n        \u003cButton block onClick={() =\u003e props.supabaseClient.auth.signOut()}\u003e\n          Sign out\n        \u003c/Button\u003e\n      \u003c/\u003e\n    );\n  return props.children;\n};\n\nexport default function Home() {\n  return (\n    \u003cAuth.UserContextProvider supabaseClient={supabase}\u003e\n      \u003cContainer supabaseClient={supabase}\u003e\n        \u003cAuth providers={['facebook', 'github']} supabaseClient={supabase}/\u003e\n      \u003c/Container\u003e\n    \u003c/Auth.UserContextProvider\u003e\n  );\n};\n```\n\n## Roadmap\n\nSome of these are a work in progress - we invite anyone to submit a [feature request](https://github.com/supabase/ui/issues/new?labels=enhancement\u0026template=2.Feature_request.md) if there is something you would like to see.\n\n_General_\n\n- [x] Button\n- [x] Typography\n- [x] Icon\n- [x] Image (work in progress)\n\n_Data Input_\n\n- [x] Input\n- [x] InputNumber\n- [x] Select (custom select wip)\n- [x] Checkbox\n- [x] Radio\n- [x] Toggle\n- [ ] Upload\n- [ ] Slider\n- [ ] Date picker\n- [ ] Time picker\n- [ ] Form\n\n_Layout_\n\n- [ ] ~~Layout~~\n- [ ] ~~Grid (Flex)~~\n- [x] Divider\n- [x] Space (Flex)\n\n_Display_\n\n- [x] Card\n- [ ] Avatar\n- [x] Accordion\n- [x] Alert\n- [x] Badge\n- [x] Menu\n- [ ] Tooltips\n- [ ] Tables\n- [ ] Code block\n\n_Navigation_\n\n- [x] Tabs\n- [ ] Breadcrumb\n- [x] Dropdown\n- [x] Menu\n- [ ] Page Header\n- [ ] Sidebar\n- [ ] Flyout menu\n- [ ] Steps\n\n_Overlay_\n\n- [x] Modal\n- [x] Context Menu\n- [x] Drawer / SidePanel\n- [ ] Toast messages / Notification\n- [ ] Progress\n- [ ] Feeds / Timeline\n\n_Utility_\n\n- [x] Loading\n- [x] Transition (work in progress)\n\n_Misc_\n\n- [x] Storybook docs\n- [ ] Theming (in progress)\n- [x] Supabase Auth Elements\n- [x] Documentation website\n\nWe would be keen to hear any feedback on this project.\n\nFeel free to [submit a question or idea here](https://github.com/supabase/supabase/discussions/category_choices)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupabase%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsupabase%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupabase%2Fui/lists"}