{"id":22433137,"url":"https://github.com/switchdreams/switch-ui","last_synced_at":"2025-07-16T07:43:48.598Z","repository":{"id":253441293,"uuid":"665221217","full_name":"SwitchDreams/switch-ui","owner":"SwitchDreams","description":"Biblioteca de componentes da SwitchDreams LTDA","archived":false,"fork":false,"pushed_at":"2024-11-26T13:45:11.000Z","size":2032,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-26T14:35:23.062Z","etag":null,"topics":["hacktoberfest","react","tailwindcss","ui"],"latest_commit_sha":null,"homepage":"https://ui.switchdreams.com.br","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/SwitchDreams.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":"2023-07-11T17:58:23.000Z","updated_at":"2024-11-26T13:45:15.000Z","dependencies_parsed_at":"2024-10-16T17:07:41.592Z","dependency_job_id":"7f163daf-2929-4d3c-bdeb-6f6f2ca357cb","html_url":"https://github.com/SwitchDreams/switch-ui","commit_stats":null,"previous_names":["switchdreams/switch-ui"],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SwitchDreams%2Fswitch-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SwitchDreams%2Fswitch-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SwitchDreams%2Fswitch-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SwitchDreams%2Fswitch-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SwitchDreams","download_url":"https://codeload.github.com/SwitchDreams/switch-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228377561,"owners_count":17910449,"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":["hacktoberfest","react","tailwindcss","ui"],"created_at":"2024-12-05T22:14:00.175Z","updated_at":"2025-07-16T07:43:48.589Z","avatar_url":"https://github.com/SwitchDreams.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# switch-ui\n\nA SwitchUI é a biblioteca de componentes em React para os produtos SwitchDreams LTDA.\n\n[LookBook](https://ui.switchdreams.com.br/)\n\n[Figma](https://www.figma.com/file/tygmPPx4ux69Uu3MzLKvtb/Switch-UI?node-id=0%3A1\u0026mode=dev)\n\n## Instalação\n\n\u003e Antes da versão 1.3.0 era utilizado o github packages, portanto era\n\u003e necessário [mais passos para instalação](https://github.com/SwitchDreams/switch-ui/blob/main/docs/old-install-with-github-package.md)\n\n- Instale os pacotes utilizando `pnpm install @switchdreams/ui @headlessui/tailwindcss`\n\n- No seu arquivo tailwind.config.js adicione o seguinte código:\n\n```js\nimport { colors } from \"@switchdreams/ui\"\nimport switchUiPlugin from \"@switchdreams/ui/dist/tailwind.plugin\"\nimport generated from \"@headlessui/tailwindcss\";\n\nmodule.exports = {\n  content: [\n    \"./node_modules/@switchdreams/ui/dist/**/*.js\",\n    //...\n  ],\n  theme: {\n    extend: {\n      curvature: {\n        md: 0, // Configura a curvatura dos componentes\n        full: 0,\n      },\n      colors: colors, // Cores de 0 25 to 950 (altere as cores primaria e secundárias para os projetos)\n      fontFamily: {\n        default: ['Poppins', 'sans-serif'], //.. Opcional\n      },\n    },\n  },\n  plugins: [\n    switchUiPlugin,\n    generated({ prefix: \"ui\" })\n  ],\n\n}\n```\n\n## Para configuração sem tailwind\n\n- Importe o seguinte arquivo css `import '@switchdreams/ui/dist/style.css'`\n\n## Configuração dos componentes\n\nOs componentes em geral são configuráveis via props, em alguns casos especiais precisamos varias as cores padrões dos\ncomponentes e eles são configurados no arquivo `tailwind.config.js`.\n\n```js\n//... tailwind.config.js  \nmodule.exports = {\n  //...\n  theme: {\n    extend: {\n      colors: {\n        ...colors,\n        btn: {\n          primary: {\n            bg: colors.primary[\"300\"],\n            hover: colors.primary[\"400\"],\n            active: colors.primary[\"500\"],\n            focus: colors.primary[\"300\"],\n            text: colors.gray.white,\n          },\n          outline: {\n            bg: colors.gray.white,\n            hover: colors.primary[\"25\"],\n            active: colors.primary[\"100\"],\n            focus: colors.gray.white,\n            text: colors.primary[\"300\"],\n          },\n          invisible: {\n            bg: colors.gray.white,\n            hover: colors.gray[\"50\"],\n            active: colors.gray[\"100\"],\n            focus: colors.gray[\"white\"],\n            text: colors.gray[\"800\"],\n          },\n        },\n      },\n    },\n    //...\n  },\n}\n```\n\n## Configurações das Fontes\n\nPor padrão nossa biblioteca deveria utiliza a fonte Poppins, porém para deixar mais flexível e diminuir o\ntamanho do bundle, deixamos a cargo do projeto a escolha da fonte:\n\n```css\n/* Seu arquivo css do projeto */\n@import url(\"https://fonts.googleapis.com/css2?family=Poppins\u0026display=swap\");\n\n/* or */\n\n@font-face {\n    font-family: \"Poppins\";\n    src: url(\"../../fonts/Poppins-Medium.ttf\");\n    font-weight: 500;\n}\n\n\n/* Font padrão para os outros componentes do sistema além os textos */\nhtml {\n    font-family: Poppins, sans-serif;\n}\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      fontFamily: {\n        default: ['Poppins', 'sans-serif'],\n      },\n    },\n  },\n}\n```\n\n## Ferramentas\n\n- React\n- [Github Pacakges](https://github.com/features/packages)\n- Tailwind\n- Headless/UI para acessibilidade e animações\n- LookBook para visualização de componentes\n\n## Inspirações\n\nIsaac Newton - \"Se eu vi mais longe que outros é porque estive aos ombros de gigantes.\"\n\n- [Shadcn/ui](https://ui.shadcn.com/docs)\n- [Primer github](https://primer.style/design/)\n\n## Observação:\n\n#### Personalização\n\nTodos os componentes foram projetados para ser altamente personalizável usando classes CSS da biblioteca Tailwind CSS.\nVocê pode ajustar as cores, fontes e espaçamento de acordo com suas necessidades.\n\n#### Conclusão\n\nOs componentes da SwitchUI oferecem uma maneira simples e eficaz de componentes interativos e responsivos em seus\nprojetos. Eles combinam o poder do Tailwind CSS e dos códigos mais recentes para criar uma experiência de usuário\nagradável e elegante. Experimente e adapte-o para se adequar ao seu design e estilo específicos.\n\n#### Outras Documentação\n\n- Tree-shaking: docs/tree-shaking.md\n- Guia de upgrade da V0.4 para 1.0: docs/upgrade-guide.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswitchdreams%2Fswitch-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswitchdreams%2Fswitch-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswitchdreams%2Fswitch-ui/lists"}