{"id":40276518,"url":"https://github.com/pablogeokar/zionix-ui","last_synced_at":"2026-01-20T03:07:49.823Z","repository":{"id":65147648,"uuid":"583900910","full_name":"pablogeokar/zionix-ui","owner":"pablogeokar","description":"A collection of ready-to-use components based on styled-components","archived":false,"fork":false,"pushed_at":"2023-01-15T21:55:40.000Z","size":259,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-13T05:34:41.758Z","etag":null,"topics":["css-modules-react","nextjs","react-ui","react-ui-components","reactjs","ui-components"],"latest_commit_sha":null,"homepage":"https://zionix-ui.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/pablogeokar.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}},"created_at":"2022-12-31T11:32:58.000Z","updated_at":"2023-11-19T12:10:05.000Z","dependencies_parsed_at":"2023-02-09T23:45:54.755Z","dependency_job_id":null,"html_url":"https://github.com/pablogeokar/zionix-ui","commit_stats":null,"previous_names":[],"tags_count":173,"template":false,"template_full_name":null,"purl":"pkg:github/pablogeokar/zionix-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablogeokar%2Fzionix-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablogeokar%2Fzionix-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablogeokar%2Fzionix-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablogeokar%2Fzionix-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pablogeokar","download_url":"https://codeload.github.com/pablogeokar/zionix-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablogeokar%2Fzionix-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28594958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"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":["css-modules-react","nextjs","react-ui","react-ui-components","reactjs","ui-components"],"created_at":"2026-01-20T03:07:49.036Z","updated_at":"2026-01-20T03:07:49.816Z","avatar_url":"https://github.com/pablogeokar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"  \u003cp align=\"center\"\u003e\n     \u003cimg src=\"https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\" alt=\"ReactJs\" /\u003e\n     \u003cimg src=\"https://img.shields.io/badge/Next-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white\" alt=\"Nextjs compatible\" /\u003e\n     \u003ca href=\"https://zionix-ui.vercel.app\"\u003e \u003cimg src=\"https://img.shields.io/website?down_message=offline\u0026label=ZIONIX%20docs\u0026up_message=online\u0026url=https%3A%2F%2Fzionix-ui.vercel.app%2F\" alt=\"PRs welcome!\" /\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\n# Zionix-ui\n\nA collection of ready-to-use components based on pure clean css modules 🚧 is under Construction!\n\nTHIS COMPONENT IS STILL BEING DEVELOPED, IF YOU WANT TO CONTRIBUTE YOU CAN CONTACT US.\n\n🇧🇷 Alô galera do Brasil, esta biblioteca ainda está em construção, caso alguém queira ajudar é só me gritar 😀\n\n## Quick start\n\nImport into `pages/_app.ts` ThemeContextProvider and ThemeFont\n\nFirst you will import the ThemeContextProvider and ThemeFont to the main page of your react project as in the example below,\nThemeFont is optional, if you already have your own font loading routine, this component can be safely left out.\n\n🇧🇷 Primeiro você irá importar o ThemeContextProvider e o ThemeFont para a página principal do seu projeto react como no exemplo abaixo,\no ThemeFont é opcional, caso você já tenha sua própria rotina de carregamento de fontes, este componente poderá ficar de fora tranquilamente.\nAlô galera do meu Braza lembrem-se de incluir no header do seu html a tag acima para que a responsividade funcione corretamente.\n\n```js\nimport { ThemeContextProvider, ThemeFont } from \"@zionix/ui\";\n\n  \u003cThemeFont font=\"Poppins\" /\u003e {/*ThemeFont is optional*/}\n  \u003cThemeContextProvider\u003e\n    \u003cComponent {...pageProps} /\u003e\n  \u003c/ThemeContextProvider\u003e\n```\n\nAn important detail, I know that many know but it is worth remembering once again, for correct responsiveness it is mandatory to insert the tag below in the header of your html.\n\n```html\n\u003cheader\u003e\n  \u003cmeta\n    name=\"viewport\"\n    content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0\"\n  /\u003e\n\u003c/header\u003e\n```\n\nUsing the example above the default theme will be applied, to add your custom theme, our library also allows theme customization.\n\n🇧🇷 Exemplo de como personalizar seu próprio tema\n\n```js\nimport { ThemeContextProvider, ThemeFont, ThemeType } from \"@zionix/ui\";\n\n// Minimal Example\nconst theme: ThemeType = {\n  colors: {\n    body: \"#f5f5f5\",\n    black: \"#333333\",\n    white: \"#ffffff\",\n    primary: \"#6A5ACD\",\n    secondary: \"#B8860B\",\n    accent: \"#ff5252\",\n    lightGray: \"#bbbbbb\",\n  },\n};\n\n// Full Example\nconst themeWithFullOptions: ThemeType = {\n  colors: {\n    accent: \"#f72585\",\n    black: \"#333333\",\n    body: \"#f5f5f5\",\n    error: \"#D32F2F\",\n    lightGray: \"#c4c4c4\",\n    primary: \"#0288D1\",\n    secondary: \"#616161\",\n    success: \"#689F38\",\n    warning: \"#FBC02D\",\n    white: \"#ffffff\",\n  },\n  components: {\n    card: {\n      filter: \"drop-shadow(0 5px 4px var(--lightGray))\",\n    },\n  },\n  layout: {\n    borderRadius: \"0.8rem\",\n    gap: \"1.6rem\",\n    padding: \"1.6rem\",\n  },\n  sizes: {\n    text: \"clamp(1.6rem, 1.250vw, 1.6rem)\",\n    h1: \"clamp(3.6rem, 2.6vw, 4.2rem)\",\n    h2: \"clamp(2.882rem, 2.08vw, 3.4rem)\",\n    h3: \"clamp(2.1rem, 1.6vw, 2.7rem)\",\n    h4: \"clamp(1.6rem, 1.250vw, 2.1rem)\",\n    h5: \"clamp(1.2rem, 1vw, 1.5rem)\",\n    h6: \"clamp(.9rem, 0.7vw, 1.1rem)\",\n  },\n};\n\n  \u003cThemeFont font=\"Poppins\" /\u003e\n  \u003cThemeContextProvider theme={theme}\u003e\n    \u003cComponent {...pageProps} /\u003e\n  \u003c/ThemeContextProvider\u003e\n\n```\n\n### `useThemeContext`\n\nYou can access theme variables through useThemeContext, the sky is the limit on your creativity to build your own derived components.\n\n🇧🇷 Você pode acessar as variáveis do tema através do useThemeContext, o céu é o limite da sua criatividade para construir seus próprios componentes derivados.\n\n```js\nimport { useThemeContext } from \"@zionix/ui\";\n\nconst theme = useThemeContext();\nconsole.log(theme.colors.primary);\n```\n\n### `Tabs`\n\n```js\n\u003cTabs\n  title=\"#Tab Title\"\n  tabs={[\n    {\n      iconName: \"Monitor\",\n      label: \"Design\",\n      component: \u003cText\u003eContent Tab #1\u003c/Text\u003e,\n    },\n    {\n      iconName: \"Code\",\n      label: \"Code\",\n      component: \u003cText\u003eContent Tab #2\u003c/Text\u003e,\n    },\n  ]}\n/\u003e\n```\n\n### `Marker`\n\n```js\n    \u003cMarker /\u003e\n    \u003cMarker primary /\u003e\n    \u003cMarker secondary /\u003e\n    \u003cMarker accent /\u003e\n    \u003cMarker success /\u003e\n    \u003cMarker warning /\u003e\n    \u003cMarker error /\u003e\n    \u003cMarker color='#8e44ad' /\u003e\n    \u003cMarker size={30} /\u003e\n```\n\n### `Text`\n\n```js\n    \u003cText level={1} fontWeight={800}\u003eTypography h1\u003c/Text\u003e\n    \u003cText level={1} primary\u003eTypography h1\u003c/Text\u003e\n    \u003cText level={2} secondary\u003eTypography h2\u003c/Text\u003e\n    \u003cText level={3} fontWeight={600}\u003eTypography h3\u003c/Text\u003e\n    \u003cText level={4} accent\u003eTypography h4\u003c/Text\u003e\n    \u003cText level={5}\u003eTypography h5\u003c/Text\u003e\n    \u003cText level={6}\u003eTypography h6\u003c/Text\u003e\n    \u003cText level={6} color='var(--black)'\u003eTypography h6\u003c/Text\u003e\n    \u003cText secondary\u003eSimple text with normal size\u003c/Text\u003e\n    \u003cText\u003eSimple text with normal size\u003c/Text\u003e\n```\n\n### `Button`\n\nNormal\n\n```js\n    \u003cButton iconName='DownloadSimple' primary label='Download' /\u003e\n    \u003cButton iconName='Newspaper' label='News' secondary /\u003e\n    \u003cButton iconName='Alarm' label='Schedule' accent /\u003e\n    \u003cButton iconName='Archive' label='Archive' success /\u003e\n    \u003cButton iconName='Trash' label='Delete' danger /\u003e\n    \u003cButton iconName='Trash' label='Delete' warning /\u003e\n```\n\nDisabled\n\n```js\n    \u003cButton iconName='DownloadSimple' primary label='Download' disabled /\u003e\n    \u003cButton iconName='Newspaper' label='News' secondary disabled /\u003e\n    \u003cButton iconName='Alarm' label='Schedule' accent disabled /\u003e\n    \u003cButton iconName='Archive' label='Archive' success disabled /\u003e\n    \u003cButton iconName='Trash' label='Delete' danger disabled /\u003e\n    \u003cButton iconName='Trash' label='Delete' warning disabled /\u003e\n```\n\nLoading\n\n```js\n    \u003cButton iconName='DownloadSimple' primary label='Download' isLoading /\u003e\n    \u003cButton iconName='Newspaper' label='News' secondary isLoading /\u003e\n    \u003cButton iconName='Alarm' label='Schedule' accent isLoading /\u003e\n    \u003cButton iconName='Archive' label='Archive' success isLoading /\u003e\n    \u003cButton iconName='Trash' label='Delete' danger isLoading /\u003e\n    \u003cButton iconName='Trash' label='Delete' warning isLoading /\u003e\n```\n\nBackground transparent with inverted colors\n\n```js\n    \u003cButton iconName='DownloadSimple' primaryInverted label='Download' /\u003e\n    \u003cButton iconName='Newspaper' label='News' secondaryInverted /\u003e\n    \u003cButton iconName='Alarm' label='Schedule' accentInverted /\u003e\n    \u003cButton iconName='Archive' label='Archive' successInverted /\u003e\n    \u003cButton iconName='Trash' label='Delete' dangerInverted /\u003e\n    \u003cButton iconName='Trash' label='Delete' warningInverted /\u003e\n```\n\nBackground transparent with inverted colors and border none\n\n```js\n    \u003cButton iconName='DownloadSimple' primaryInverted borderNone label='Download' /\u003e\n    \u003cButton iconName='Newspaper' label='News' secondaryInverted borderNone/\u003e\n    \u003cButton iconName='Alarm' label='Schedule' accentInverted borderNone/\u003e\n    \u003cButton iconName='Archive' label='Archive' successInverted borderNone/\u003e\n    \u003cButton iconName='Trash' label='Delete' dangerInverted borderNone/\u003e\n    \u003cButton iconName='Trash' label='Delete' warningInverted borderNone/\u003e\n```\n\n### `Icon`\n\nBuilt-in [phosphor-icons](https://https://phosphoricons.com) icon pack, to see the full list of icons, go to the [phosphor-icons](https://https://phosphoricons.com) website and search for the icon you need.\n\n```js\n    \u003cIcon icon=\"Alarm\" size={48} /\u003e\n    \u003cIcon icon=\"Alien\" size={48} /\u003e\n    \u003cIcon icon=\"Dog\" size={48} /\u003e\n    \u003cIcon icon=\"House\" size={48} /\u003e\n    \u003cIcon icon=\"Pencil\" size={48} /\u003e\n    \u003cIcon icon=\"User\" size={48} /\u003e\n    \u003cIcon icon=\"Users\" size={48} /\u003e\n\n    \u003cIcon icon=\"Alarm\" weight=\"duotone\" /\u003e\n    \u003cIcon icon=\"Alien\" weight=\"duotone\" /\u003e\n    \u003cIcon icon=\"Dog\" weight=\"duotone\" /\u003e\n    \u003cIcon icon=\"House\" weight=\"duotone\" /\u003e\n    \u003cIcon icon=\"Pencil\" weight=\"duotone\" /\u003e\n    \u003cIcon icon=\"User\" weight=\"duotone\" /\u003e\n    \u003cIcon icon=\"Users\" weight=\"duotone\" /\u003e\n\n    \u003cIcon icon=\"Alarm\" weight=\"bold\" /\u003e\n    \u003cIcon icon=\"Alien\" weight=\"bold\" /\u003e\n    \u003cIcon icon=\"Dog\" weight=\"bold\" /\u003e\n    \u003cIcon icon=\"House\" weight=\"bold\" /\u003e\n    \u003cIcon icon=\"Pencil\" weight=\"bold\" /\u003e\n    \u003cIcon icon=\"User\" weight=\"bold\" /\u003e\n    \u003cIcon icon=\"Users\" weight=\"bold\" /\u003e\n```\n\n### `Input`\n\n```js\n\u003cInput label=\"Name\" /\u003e\n```\n\n### `Form`\n\n```js\n\u003cForm.Container method='post'\u003e\n  \u003cText level={2} separator\u003e\n    \u003cIcon iconName=\"UserPlus\" /\u003e New user\n  \u003c/Text\u003e\n  \u003cForm.Row\u003e\n    \u003cInput label=\"Name:\" /\u003e\n    \u003cInput label=\"Lastname:\" /\u003e\n  \u003c/Form.Row\u003e\n  \u003cForm.Row\u003e\n    \u003cInput label=\"Password:\" type=\"password\" /\u003e\n    \u003cInput label=\"Confirm password:\" type=\"password\" /\u003e\n  \u003c/Form.Row\u003e\n  \u003cInput label=\"Email:\" /\u003e\n  \u003cForm.Row end\u003e\n    \u003cButton type=\"reset\" label=\"Clear form\" /\u003e\n    \u003cButton icon='Check' label='Save' success onClick={() =\u003e alert('Hello World!')} /\u003e\n  \u003c/Form.Row\u003e\n\u003c/Form.Container\u003e\n```\n\n### `Card`\n\n```js\n\u003cCard.Container maxWidth=\"650px\"\u003e\n  \u003cText level={1} secondary\u003e\n    Hello,\n  \u003c/Text\u003e\n  \u003cCard.Row\u003e\n    \u003cInput label=\"Name\" /\u003e\n    \u003cInput label=\"Last name\" /\u003e\n  \u003c/Card.Row\u003e\n\n  \u003cInput label=\"E-mail\" type=\"email\" /\u003e\n\n  \u003cCard.Row end\u003e\n    \u003cButton primaryInverted label=\"Join now\" iconName=\"AddressBook\" /\u003e\n    \u003cButton primary label=\"Sign In\" iconName=\"SignIn\" /\u003e\n  \u003c/Card.Row\u003e\n\u003c/Card.Container\u003e\n```\n\nCalm down guys, I'm still creating the components, I'm working alone and I can only work in the library in my spare time :D\n\n### css vars\n\nThese are the global variables used by @zionix/ui and customize your own css components:\n\n```css\nroot: {\n  --accent: #f72585;\n  --bg: #f5f5f5;\n  --black: #333333;\n  --danger: #d32f2f;\n  --lightGray: #c4c4c4;\n  --primary: #0288d1;\n  --secondary: #616161;\n  --success: #689f38;\n  --warning: #fbc02d;\n  --white: #ffffff;\n\n  --component-card--filter: drop-shadow(0 5px 4px var(--lightGray));\n  --borderRadius: 0.8rem;\n  --gap: 1.6rem;\n  --padding: 1.6rem;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablogeokar%2Fzionix-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpablogeokar%2Fzionix-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablogeokar%2Fzionix-ui/lists"}