{"id":16958657,"url":"https://github.com/molebox/humix-ui","last_synced_at":"2026-05-18T11:35:50.634Z","repository":{"id":50956590,"uuid":"367948790","full_name":"molebox/humix-ui","owner":"molebox","description":"A Small. Simple component library with nice props and easy config.","archived":false,"fork":false,"pushed_at":"2021-05-30T17:58:42.000Z","size":6939,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-24T02:38:18.883Z","etag":null,"topics":["a11y","component-library","react","react-component-library","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://humix-ui.netlify.app/?path=/docs/interactive-elements-button--primary-button","language":"JavaScript","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/molebox.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}},"created_at":"2021-05-16T17:45:47.000Z","updated_at":"2021-05-30T17:58:44.000Z","dependencies_parsed_at":"2022-09-09T22:51:30.435Z","dependency_job_id":null,"html_url":"https://github.com/molebox/humix-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/molebox/humix-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molebox%2Fhumix-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molebox%2Fhumix-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molebox%2Fhumix-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molebox%2Fhumix-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/molebox","download_url":"https://codeload.github.com/molebox/humix-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molebox%2Fhumix-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33177204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["a11y","component-library","react","react-component-library","ui-components","ui-library"],"created_at":"2024-10-13T22:43:14.677Z","updated_at":"2026-05-18T11:35:45.626Z","avatar_url":"https://github.com/molebox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003ehumix-ui\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  A Small. Simple component library with nice props and easy config.\n\u003c/p\u003e\n\n## What?\n\nIt's pronounced hue-mix. It's a mix of my three kids names, Hollie, Uma and Phoenix.\n\n## Why?\n\nWhy not? Learn by doing. Ive never made a component library before. This library is built on top of [stitches](https://stitches.dev/). Anything you may find awesome is their work, this is just a nice abstraction with props that i like and easy config.\n\n## Where?\n\nStorybook: [humix-ui.netlify.app](https://humix-ui.netlify.app/)\n\n## Install\n\n`yarn add humix-ui` | `npm install humix-ui`\n\n## Components\n\nCurrent components:\n- [Button](#button)\n- [Box](#box)\n- [Link](#link)\n- [Typography](#typography)\n\nAll components are created and styled using [stitches](https://stitches.dev/). The default theme object can be overriden by importing the `createTheme` function and replacing the theme tokens. Intellisense is included by default because stitches is dope.\n\nAll tokens are customizable, let the auto-complete guide you and if that doesn't suffice you can check out the [stitches tokens docs](https://stitches.dev/docs/tokens).\n\n```ts\nimport { createTheme } from 'humix-ui'\n\nexport const myTheme = creteTheme({\n    colors: {\n        primary100: 'hsl(110, 100%, 87%)',\n        primary200: 'hsl(110, 100%, 80%)',\n        secondary100: 'hsl(62, 100%, 86%)',\n        secondary200: 'hsl(62, 100%, 76%)',\n        darkText: '#001F52',\n        lightText: '#FFFFFC'\n    }\n})\n```\n\nTo consume your new theme just add it as a className to any parent element whose children render humix-ui components. Your new color values will now be rendered instead of the defaults.\n\n```tsx\nimport { myTheme } from 'path/to/my/theme'\n\nconst RootBoogie = () =\u003e (\n  \u003cdiv className={myTheme}\u003e\n    \u003csection\u003e\n      \u003cButton color=\"primary\" cornerRadius=\"rounded\" \u003eIm a button!\u003c/Button\u003e\n    \u003c/section\u003e\n  \u003c/div\u003e\n)\n```\n\nHumix also ships with a few different themes which you can import and apply the same way as stated above.\n\n```tsx\nimport { pastelTheme } from 'humix-ui'\n\nconst RootBoogie = () =\u003e (\n  \u003cdiv className={pastelTheme}\u003e\n    \u003csection\u003e\n      \u003cButton color=\"primary\" cornerRadius=\"rounded\" onClick={handleTheClicking}\u003eIm a button!\u003c/Button\u003e\n    \u003c/section\u003e\n  \u003c/div\u003e\n)\n```\n\nCurrent theme list:\n- default\n- pastelTheme\n\n### Utilities\n\nHumix ships with some handy utility functions:\n\n- [A global CSS reset](#resetcss)\n- [Font face](#fontface)\n- [Multiple font faces](#multifontface)\n\n#### `resetCSS`\n\nCall this function at the root level of your app. It's a sane, default CSS reset:\n\n```tsx\nimport { resetCSS } from 'humix-ui'\n\nconst Root = () =\u003e {\n  resetCSS()\n\n  return (\n    \u003cdiv\u003eSup?\u003c/div\u003e\n  )\n}\n```\n\n#### FontFace\n\nSet your font globally with a self hosted font-face.\n\n```tsx\nimport { fontFace } from 'humix-ui'\n\nconst Root = () =\u003e {\n  fontFace('Open Sans', pathToFont)\n\n  return (\n    \u003cdiv\u003eSup?\u003c/div\u003e\n  )\n}\n```\n\n#### MultiFontFace\n\nSet multiple fonts globally with a self hosted font-faces.\n\n```tsx\nimport { multiFontFace } from 'humix-ui'\n\nconst Root = () =\u003e {\n    const myFonts = [\n    {\n      fontFamily: 'CustomFont1',\n      src: 'local(\"CustomFont1\"), url(\"CustomFont1.woff2\")',\n    },\n    {\n      fontFamily: 'CustomFont2',\n      src: 'local(\"CustomFont2\"), url(\"CustomFont2.woff2\")',\n    },\n  ],\n\n  multiFontFace(myFonts)\n\n  return (\n    \u003cdiv\u003eSup?\u003c/div\u003e\n  )\n}\n```\n\n### Button\n\nA super duper simple, accessible button component.\n\n#### Usage\n\nThe button asks that you make a choice as to how you want it to render. It's totally explicit and will shout at you if you dont supply it the props it wants.\n\nHave a look [in real life](https://humix-ui.netlify.app/?path=/docs/interactive-elements-button--primary-button)\n\n| prop         | default  | description                                                                          | options                       |\n| ------------ | -------- | ------------------------------------------------------------------------------------ | ----------------------------- |\n| stylz        | optional | Style the element by adding object syntax css. Accepts theme tokens as $myThemeToken | n/a                           |\n| color        | none     | Background color of the button                                                       | `primary`, `secondary`        |\n| cornerRadius | none     | Corner radius of the button                                                          | `square`, `slight`, `rounded` |\n\n```tsx\nimport { Button } from 'humix-ui'\n\nconst RootBoogie = () =\u003e (\n    \u003csection\u003e\n      \u003cButton color=\"primary\" cornerRadius=\"rounded\" onClick={handleTheClicking}\u003eIm a button!\u003c/Button\u003e\n    \u003c/section\u003e\n)\n```\n\n### Box\n\nA polymorphic box that can be styled in multiple ways. The box has an `as` props which allows it to be rendered as any of the following HTML elements:\n\n- div (default)\n- section\n- main\n- header\n- nav\n- footer\n- aside\n- article\n\n#### Usage\n\nIt's main usage is as a container. It ships with a number of boolean props which add border and / or box shadows of `primary` or `secondary` colors according to the theme config.\n\nThe box also takes a `stylz` props which can be used to style the box using object syntax css.\n\nAll css properties are avalaible via intellisense and you can use theme token direct in the `stylz` object!\n\n| prop                 | default  | description                                                                          | options                     |\n| -------------------- | -------- | ------------------------------------------------------------------------------------ | --------------------------- |\n| stylz                | optional | Style the element by adding object syntax css. Accepts theme tokens as $myThemeToken | n/a                         |\n| border               | optional | Attaches a 2px border                                                                | n/a                         |\n| maxWidth             | optional | Max width of the box.                                                                | `500px`, `1000px`, `1440px` |\n| autoFill300          | optional | Responsive grid (auto-fill), min - auto, max - 300px                                 | n/a                         |\n| autoFill350          | optional | Responsive grid (auto-fill), min - auto, max - 350px                                 | n/a                         |\n| autoFill400          | optional | Responsive grid (auto-fill), min - auto, max - 400px                                 | n/a                         |\n| autoFill450          | optional | Responsive grid (auto-fill), min - auto, max - 450px                                 | n/a                         |\n| autoFill500          | optional | Responsive grid (auto-fill), min - auto, max - 500px                                 | n/a                         |\n| autoFit300           | optional | Responsive grid (auto-fit), min - auto, max - 300px                                  | n/a                         |\n| autoFit350           | optional | Responsive grid (auto-fit), min - auto, max - 350px                                  | n/a                         |\n| autoFit400           | optional | Responsive grid (auto-fit), min - auto, max - 400px                                  | n/a                         |\n| autoFit450           | optional | Responsive grid (auto-fit), min - auto, max - 450px                                  | n/a                         |\n| autoFit500           | optional | Responsive grid (auto-fit), min - auto, max - 500px                                  | n/a                         |\n| primaryBottomRight   | optional | A box shadow using the primary color on the bottom right                             | n/a                         |\n| primaryBottomLeft    | optional | A box shadow using the primary color on the bottom left                              | n/a                         |\n| primaryTopRight      | optional | A box shadow using the primary color on the top right                                | n/a                         |\n| primaryTopLeft       | optional | A box shadow using the primary color on the top left                                 | n/a                         |\n| secondaryTopLeft     | optional | A box shadow using the secondary color on the top left                               | n/a                         |\n| secondaryTopRight    | optional | A box shadow using the secondary color on the top right                              | n/a                         |\n| secondaryBottomLeft  | optional | A box shadow using the secondary color on the bottom left                            | n/a                         |\n| secondaryBottomRight | optional | A box shadow using the secondary color on the bottom right                           | n/a                         |\n\n#### No styling, just a container\n\n ```tsx\nimport { Box, Button } from 'humix-ui';\n\nconst RootBoogie = () =\u003e (\n    \u003cBox\n      as=\"section\"\n      stylz={{\n        width: '300px',\n        height: '300px',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    \u003e\n      \u003cButton color=\"primary\" cornerRadius=\"rounded\" onClick={handleTheClicking}\u003eIm a button!\u003c/Button\u003e\n    \u003c/Box\u003e\n)\n ```\n\n#### Some funky arse box shadow styling with a 2px border.\n\nHave a look [in real life](https://humix-ui.netlify.app/?path=/docs/layout-elements-box--primary-box-as-section)\n\n```tsx\nimport { Box, Button } from 'humix-ui';\n\nconst RootBoogie = () =\u003e (\n    \u003cBox\n      as=\"aside\"\n      primaryBottomRight\n      border\n    \u003e\n      \u003cButton color=\"primary\" cornerRadius=\"rounded\" onClick={handleTheClicking}\u003eIm a button!\u003c/Button\u003e\n    \u003c/Box\u003e\n)\n```\n\n#### Using the `stlyz` prop to override the base styles\n\nThe box component is special in that, in a general sense its cool to override the base styles. It's got some nice base props bit as a conatiner component,\nyou'll want to style it your way.\n\n```tsx\nimport { Box, Typography } from 'humix-ui';\n\nconst RootBoogie = () =\u003e (\n    \u003cBox\n      as=\"aside\"\n      primaryBottomRight\n      border\n      stylz={{\n        backgroundColor: '$primary100' // theme token magic\n      }}\n    \u003e\n      \u003cTypography size=\"m\"\u003esome text in my box\u003c/Typography\u003e\n    \u003c/Box\u003e\n)\n```\n\n#### Flexbox\n\n```tsx\nimport { Box, Typography } from 'humix-ui';\n\nconst RootBoogie = () =\u003e (\n    \u003cBox\n      as=\"aside\"\n      flex=\"column\"\n      border\n      stylz={{\n        backgroundColor: '$primary100'\n      }}\n    \u003e\n      \u003cBox\n      as=\"aside\"\n      border\n      primaryBottomRight\n      \u003e\n        \u003cTypography size=\"m\"\u003esome text in my box\u003c/Typography\u003e\n      \u003c/Box\u003e\n      \u003cBox\n      as=\"aside\"\n      border\n      primaryBottomRight\n      \u003e\n        \u003cTypography size=\"m\"\u003esome text in my box\u003c/Typography\u003e\n      \u003c/Box\u003e\n    \u003c/Box\u003e\n)\n```\n\n#### Responsive grids\n\nThe box supports some default responsive grids. Each grid prop equats to it title. So `autoFill300`\nwill make all children fill their parents width with a value of 300px each. On smaller screens they will reduce to their parents max width.\n\nThis means on mobile they should go single column. Don't forget to add padding to your container!\n\n```tsx\nimport { Box, Typography } from 'humix-ui';\n\nconst RootBoogie = () =\u003e (\n    \u003cBox\n      as=\"aside\"\n      flex=\"column\"\n      border\n      stylz={{\n        backgroundColor: '$primary100'\n      }}\n    \u003e\n      \u003cBox\n      as=\"aside\"\n      border\n      primaryBottomRight\n      \u003e\n        \u003cTypography size=\"m\"\u003esome text in my box\u003c/Typography\u003e\n      \u003c/Box\u003e\n      \u003cBox\n      as=\"aside\"\n      border\n      primaryBottomRight\n      \u003e\n        \u003cTypography size=\"m\"\u003esome text in my box\u003c/Typography\u003e\n      \u003c/Box\u003e\n      \u003cBox\n      as=\"aside\"\n      border\n      primaryBottomRight\n      \u003e\n        \u003cTypography size=\"m\"\u003esome text in my box\u003c/Typography\u003e\n      \u003c/Box\u003e\n    \u003c/Box\u003e\n)\n```\n\n### Link\n\n A link component that can be used for external linkage, but also accepts a polymorphic `as` prop so that you can use it with other cool links such as `GatsbyLink` or `NextLink`. It's accessible by default and has minimal styling.\n\n#### Usage\n\nThe link accepts two styling props, `primary` and `secondary`. These style the hover, focus and active states and match them to the colors determined in the theme config.\n\n| prop      | default  | description                                                                          | options |\n| --------- | -------- | ------------------------------------------------------------------------------------ | ------- |\n| stylz     | optional | Style the element by adding object syntax css. Accepts theme tokens as $myThemeToken | n/a     |\n| primary   | none     | Primary background color                                                             | n/a     |\n| secondary | none     | Secondary background color                                                           | n/a     |\n\n\nThe below example shows an external link.\n\n```tsx\nimport { Link } from 'humix-ui'\n\nconst RootBoogie = () =\u003e (\n    \u003csection\u003e\n      \u003cLink primary href=\"https://richardhaines.dev\"\u003e\n          Im a link, hover me!\n      \u003c/Link\u003e\n    \u003c/section\u003e\n)\n```\n\nThe below example shows using the `as` prop in combination with `GatsbyLink`. Passing the `GatsbyLink` component via the `as` prop is not actually needed, the Links `href` prop will navigate to the desired page anyway.\n\n```tsx\nimport { Link } from 'humix-ui'\nimport { Link as GatsbyLink } from 'gatsby'\n\nconst RootBoogie = () =\u003e (\n    \u003csection\u003e\n      \u003cLink primary as={GatsbyLink} href=\"/\"\u003e\n          Im a link, hover me!\n      \u003c/Link\u003e\n    \u003c/section\u003e\n)\n```\n\nIf you are using Nextjs you must wrap this Link component with the Nextjs Link component.\n\n```tsx\nimport { Link } from 'humix-ui'\nimport { Link as NextLink } from 'next/link'\n\nconst RootBoogie = () =\u003e (\n    \u003csection\u003e\n      \u003cNextLink href=\"/\"\u003e\n        \u003cLink primary\u003e\n            Im a link, hover me!\n        \u003c/Link\u003e\n      \u003c/NextLink\u003e\n    \u003c/section\u003e\n)\n```\n\n### Typography\n\nThe typography component is a polymorphic text component that can be used to render:\n\n- p (default)\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- blockquote\n- dd\n- li\n- abbr\n- cite\n- q\n- s\n\nIt's font size is determined in the config and set via a `size` prop.\n\n#### Usage\n\nBy default the component render a `p` tag, you'll still have to set the size though.\n\n| prop  | default  | description                                                                          | options |\n| ----- | -------- | ------------------------------------------------------------------------------------ | ------- |\n| stylz | optional | Style the element by adding object syntax css. Accepts theme tokens as $myThemeToken | n/a     |\n| xs    | none     | Extra small font size color                                                          | n/a     |\n| s     | none     | Small font size color                                                                | n/a     |\n| m     | none     | Medium font size - Your `1rem` color                                                 | n/a     |\n| l     | none     | Large font size color                                                                | n/a     |\n| xl    | none     | Extra large font size color                                                          | n/a     |\n| xxl   | none     | Double extra large font sizecolor                                                    | n/a     |\n| huge  | none     | Huge large font size color                                                           | n/a     |\n| jumbo | none     | Jumbo large font sizecolor                                                           | n/a     |\n\n```tsx\nexport const Paragraph = () =\u003e (\n  \u003cTypography size=\"m\"\u003e\n    Im a paragraph!\n  \u003c/Typography\u003e\n);\n```\n\nUsing the component as other types of typography is as easy as declaring its type and setting its size.\n\n```tsx\nexport const H1 = () =\u003e (\n  \u003cTypography as=\"h1\" size=\"jumbo\"\u003e\n    Im an h1!\n  \u003c/Typography\u003e\n);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolebox%2Fhumix-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmolebox%2Fhumix-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolebox%2Fhumix-ui/lists"}