{"id":25415285,"url":"https://github.com/zediculz/sutairu","last_synced_at":"2026-05-11T05:35:04.084Z","repository":{"id":230427972,"uuid":"779335222","full_name":"zediculz/sutairu","owner":"zediculz","description":"A headless react component building blocks","archived":false,"fork":false,"pushed_at":"2024-04-18T10:22:51.000Z","size":936,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T21:12:04.821Z","etag":null,"topics":["css","react","reactcomponents","reactjs"],"latest_commit_sha":null,"homepage":"","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/zediculz.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":"2024-03-29T15:40:48.000Z","updated_at":"2025-03-04T15:34:34.000Z","dependencies_parsed_at":"2024-04-02T20:42:18.469Z","dependency_job_id":"a4ee5ab5-fe8c-4f67-8118-207366e462cd","html_url":"https://github.com/zediculz/sutairu","commit_stats":null,"previous_names":["zediculz/sutairu"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/zediculz/sutairu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zediculz%2Fsutairu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zediculz%2Fsutairu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zediculz%2Fsutairu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zediculz%2Fsutairu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zediculz","download_url":"https://codeload.github.com/zediculz/sutairu/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zediculz%2Fsutairu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32883461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","react","reactcomponents","reactjs"],"created_at":"2025-02-16T15:34:18.957Z","updated_at":"2026-05-11T05:35:04.060Z","avatar_url":"https://github.com/zediculz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sutairu\nA Headless React component UI building blocks\n\n## Install\n\n```bash\nnpm install --save sutairu-ui\n\n```\n\n## how to use Sutairu UI \n\n### Container Component\nThe container component serves as the actual wrapper around all Sutairu UI components; it expect only one child, which should be your \u003cApp /\u003e component.\n\nYou provide your theming object and wrap your \u003cApp /\u003e within the Container components in order to use the Sutairu components without any issues.\n\n\n```js\nimport { Container, loadTheme } from \"sutairu-ui\";\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  \u003cReact.StrictMode\u003e\n    \u003cContainer\u003e\n      \u003cApp /\u003e\n    \u003c/Container\u003e\n  \u003c/React.StrictMode\u003e,\n)\n\n```\n\n### useTheme Hook \nThe themes object defines some basic color options for both light and dark mode and also the media query sizes.\n\nto define your app theme import the loadTheme hook and pass in the theme object, \n\nthe object should contains \n1. light: which hold the color and backgroundColor of your app in light mode,\n2. dark:  which hold the color and backgroundColor of your app in dark mode,\n3. media: is where you define the media query sizes you want for the breakpoints provided to achieve responsiveness design, ip is the ipad screen, mb is the mobile screen and sm is for smaller mobile screens.\n\n```js\nconst theme = {\n   light: {\n        color: '#222',\n        backgroundColor: '#fff'\n   },\n   dark: {\n    color: \"#fff\",\n    backgroundColor: \"#222\"\n   },\n   media: {\n        ip: '(max-width: 768px)',\n        mb: '(max-width: 425px)',\n        sm: '(max-width: 375px)',\n    }\n}\n\nloadTheme(theme)\n```\n\n## Basic Usage\n\n```js\nimport { H } from \"sutairu-ui\";\n\nconst App = () =\u003e {\n  return \u003cH as=\"h1\" $font=\"20px\"\u003esutairu\u003c/H\u003e;\n};\n\n```\n\n\n## Layout Components\n\nBy default sutairu layout components uses flex for laying out the UI and also accept shorthand props prefix with ($) to easily style them the way you want. \n\n### Block Layout Component\nBlock component return a section tag by default, which most of the time can be used as a wrapper for multiple layouts.\n\n```javascript\nimport { Block, Box } from \"sutairu-ui\";\n\nfunction App() {\n  return (\n    \u003cBlock $h=\"400px\" $w=\"100%\" $align=\"center\"\u003e\n      \u003cBox\u003e\n        \u003cText\u003ebox one \u003c/Text\u003e\n      \u003c/Box\u003e\n      \u003cBox\u003e\n        \u003cText\u003ebox two \u003c/Text\u003e\n      \u003c/Box\u003e\n    \u003c/Block\u003e\n  );\n}\n\n```\n\n### Box Layout Component\nBox component return a div tag by default, most of the time can also be used as a wrapper for topography or as a layout.\n\n```javascript\nimport { Box } from \"sutairu-ui\";\n\nfunction App() {\n  return (\n    \u003cBox $h=\"400px\" $w=\"100%\"  $justify=\"center\" \u003e\n      \u003cText $font=\"18px\"\u003e\n          react building block\n      \u003c/Text\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n### Header Layout Component\nHeader component return a header tag by default, the header tag as a special child Nav tag thats can be used to hold navigation links inside the Header component.\n\n```javascript\nimport { Header, Box, Heading, Nav, Link } from \"sutairu-ui\";\n\nfunction App() {\n  return (\n    \u003cHeader $w=\"100%\" $h=\"80px\"\u003e\n      \u003cBox $w=\"30%\" $justify=\"flex-start\"\u003e\n        \u003cHeading $font=\"25px\"\u003esutairu\u003c/Heading\u003e\n      \u003c/Box\u003e\n      \u003cNav $w=\"40%\" $justify=\"flex-end\"\u003e\n        \u003cLink\u003edoc\u003c/Link\u003e\n        \u003cLink\u003eGithub\u003c/Link\u003e\n      \u003c/Nav\u003e\n    \u003c/Header\u003e\n  );\n}\n```\n\n\n### Topography Layout Component\ntopgraphy components contains heading and text which return h1 to h6 tag depending on the one needed and p tag respectively.\n\n```javascript\nimport { Box, H, Text } from \"sutairu-ui\";\n\nfunction App() {\n  return (\n    \u003cBox $w=\"100%\" $h=\"80px\"\u003e\n        \u003cH $font=\"25px\"\u003esutairu\u003c/H\u003e\n        \u003cText\u003eparagraph\u003c/Text\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n## Props \nto style sutairu components the way you want you will need to declare your own styles and pass them to each components as props, which can be done using shorthand props prefix with the \"$\" sign. \n\n### Props Example\nin this example $font is a props to change the font size of H component and $w and $h are props that declare the Box component width and height respectively.\n\n```javascript\nimport { Box, H } from \"sutairu-ui\";\n\nfunction App() {\n  return (\n    \u003cBox $w=\"100%\" $h=\"80px\"\u003e\n        \u003cH $font=\"25px\"\u003esutairu\u003c/H\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n\n\n### Responsiveness Props\nResponsive props are special props that focus on responsiveness, they accept styling objects which are pass to each components as props.\n\n```javascript\nimport { Box, H } from \"sutairu-ui\";\n\nfunction App() {\n  return (\n    \u003cBox $w=\"100%\" $h=\"80px\"\u003e\n        \u003cH $font=\"100px\" $ip={{font: \"90px\"}} $mb={{font: \"60px\"}} $sm={{font: \"56px\"}}\u003esutairu\u003c/H\u003e\n    \u003c/Box\u003e\n  );\n}\n\n```\nip props is going to change the font size of H component to 90px on ipad screen,\nmb props is going to change the font size of  H component to 60px on mobile screen,\nsm props is going to change the font size of H component to 56px on smaller mobile screen\n\n\n## Shorthand Props\nwidth: $w\nheight: $h \nalignItems: $align\njustifyContent: $justify\nflexDirection: $dir\nbackgroundColor: $bg\ncolor: $fg \nfontSize: $font\ndisplay: $dis\ntextAlign: $txalign\n\n#### note: all props are css value in string quotation and are prefix with $ which prevent props from been rendered to the DOM.\n\n\n## License\nMIT\n\n\n[![NPM](https://img.shields.io/npm/v/sutairu-ui.svg)](https://www.npmjs.com/package/sutairu-ui)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Contact](https://img.shields.io/badge/contact-@zediculz-blue.svg?style=flat\u0026logo=twitter)](https://twitter.com/zediculz)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/sutairu-ui?label=bundle%20size\u0026logo=webpack)](https://bundlephobia.com/result?p=sutairu-ui)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzediculz%2Fsutairu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzediculz%2Fsutairu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzediculz%2Fsutairu/lists"}