{"id":18946664,"url":"https://github.com/justgo97/stylable-ui-components","last_synced_at":"2026-04-09T21:34:11.778Z","repository":{"id":257791987,"uuid":"861761080","full_name":"justgo97/stylable-ui-components","owner":"justgo97","description":"A CSS-in-JS library for building customizable and responsive UI components in React using props for styling.","archived":false,"fork":false,"pushed_at":"2024-10-18T13:54:41.000Z","size":532,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T21:47:17.733Z","etag":null,"topics":["css","css-in-js","emotionjs","react","reactjs","stylable","styled-component","styled-components","typescript","ui-components","ui-design","ui-library"],"latest_commit_sha":null,"homepage":"","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/justgo97.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,"publiccode":null,"codemeta":null}},"created_at":"2024-09-23T13:23:08.000Z","updated_at":"2024-10-18T13:54:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"ebd5b43d-10ee-4668-940f-c2defffb2192","html_url":"https://github.com/justgo97/stylable-ui-components","commit_stats":null,"previous_names":["justgo97/stylable-components"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justgo97%2Fstylable-ui-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justgo97%2Fstylable-ui-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justgo97%2Fstylable-ui-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justgo97%2Fstylable-ui-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justgo97","download_url":"https://codeload.github.com/justgo97/stylable-ui-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239921875,"owners_count":19718841,"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":["css","css-in-js","emotionjs","react","reactjs","stylable","styled-component","styled-components","typescript","ui-components","ui-design","ui-library"],"created_at":"2024-11-08T13:07:35.723Z","updated_at":"2026-03-26T16:30:17.414Z","avatar_url":"https://github.com/justgo97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stylable UI Components\n\n[![build](https://github.com/justgo97/stylable-ui-components/actions/workflows/release_package.yml/badge.svg)](https://github.com/justgo97/stylable-ui-components/actions) [![img](https://img.shields.io/npm/v/stylable-ui-components.svg)](https://www.npmjs.com/package/stylable-ui-components) [![img](https://img.shields.io/npm/dt/stylable-ui-components.svg)](https://www.npmjs.com/package/stylable-ui-components) [![img](https://img.shields.io/npm/l/stylable-ui-components.svg)](https://github.com/justgo97/stylable-ui-components/blob/main/LICENSE)\n\nA CSS-in-JS library for building customizable and responsive UI components in React using props for styling, It allows for the easy creation of styled components with support for shorthand properties, breakpoints, and pseudo-classes.\n\n## Features\n\n- **Default Components**: Includes a set of common components like `Box`, `Flex`, `Grid`, `Text`, `Button`, and more, ready to be used out-of-the-box.\n- **Customizable Styles**: Supports dynamic styling based on props, including shorthand CSS properties and pseudo-classes.\n- **Responsive Design**: Built-in support for breakpoints, making it easy to create responsive layouts.\n- **Component Factory**: Use (`createSC`) to build new, reusable styled components that fits your UI structure.\n\n## Installation\n\nTo install the package, run:\n\n```bash\nnpm install stylable-ui-components @emotion/styled\n```\n\n## Usage\n\nStart by importing the components and using them in your React app:\n\n```tsx\nimport { Box, Flex, Button, Text } from \"stylable-ui-components\";\n\nconst App = () =\u003e (\n  \u003cFlex justify=\"center\" align=\"center\" p={4}\u003e\n    \u003cBox bgColor=\"lightgray\" p={3} borderRadius={8}\u003e\n      \u003cText fontSize={20} mb={2}\u003e\n        Hello, world!\n      \u003c/Text\u003e\n      \u003cButton onClick={() =\u003e alert(\"Clicked!\")}\u003eClick me\u003c/Button\u003e\n    \u003c/Box\u003e\n  \u003c/Flex\u003e\n);\n```\n\nAvailable Components:\n\n- `Box`, `Flex`, `Grid`, `Text`, `Paragraph`, `Heading`\n- `Link`, `Button`, `Input`, `Textarea`, `Image`, `Card`\n- `List`, `ListItem`, `Container`, `Badge`, `Avatar`\n\n### Using SCFactory (SC)\n\nYou can use the `SC` shorthand to create new styled components dynamically:\n\n```tsx\nimport { SC } from \"stylable-ui-components\";\n\nconst App = () =\u003e (\n  \u003cSC.div backgroundColor=\"lightblue\" padding=\"16px\"\u003e\n    Custom styled box\n  \u003c/SC.div\u003e\n);\n```\n\n### Creating Components with `createSC`\n\nThe `createSC` function allows you to build custom, reusable styled components. You can pass any HTML tag and default styles to it:\n\n```tsx\nimport { createSC } from \"stylable-ui-components\";\n\nconst CustomHeading = createSC(\"h2\", { color: \"purple\", fontSize: \"24px\" });\n\nconst App = () =\u003e (\n  \u003cCustomHeading mb={2}\u003eThis is a custom heading\u003c/CustomHeading\u003e\n);\n```\n\n## Customizing Styles\n\nEach component accepts CSS props and supports shorthand properties like:\n\n- `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py` for padding\n- `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my` for margin\n- `bg`, `bgColor`, `minH`, `maxW`, and more\n\nPseudo-classes like `_hover` and `_selected` can be applied to style components dynamically.\n\n```tsx\n\u003cButton p=\"1rem\" _hover={{ backgroundColor: \"darkgray\" }}\u003e\n  Hover me!\n\u003c/Button\u003e\n```\n\n## Responsive Design\n\nBuilt-in breakpoints (`_xs`, `_sm`, `_md`, `_lg`, `_xl`, `_xxl`) allow you to create responsive components:\n\n```tsx\n\u003cBox _md={{ backgroundColor: \"lightgreen\" }}\u003eResponsive box\u003c/Box\u003e\n```\n\nYou can also inline any pseudo-classes within another:\n\n```tsx\n\u003cBox _hover={{ bgColor: \"beige\", _md: { backgroundColor: \"lightgreen\" } }}\u003e\n  Hover Responsive box\n\u003c/Box\u003e\n```\n\n## Notes\n\n- This is still a **Work in Progress** ⚠️ so some features aren't heavly tested and some syntax changes could occur in newer versions.\n- A run time CSS-in-JS solution could be less performant than other approaches in various cases, thus this is more suitable for small and meduim size projects where this issue is insignifcant.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustgo97%2Fstylable-ui-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustgo97%2Fstylable-ui-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustgo97%2Fstylable-ui-components/lists"}