{"id":26916967,"url":"https://github.com/iagodahlem/flokit","last_synced_at":"2025-04-01T19:50:20.957Z","repository":{"id":47423702,"uuid":"158609463","full_name":"iagodahlem/flokit","owner":"iagodahlem","description":":ship: Toolkit for easily and smoothly building UIs with React.","archived":false,"fork":false,"pushed_at":"2022-12-10T16:49:48.000Z","size":2035,"stargazers_count":3,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-20T09:47:31.139Z","etag":null,"topics":["component-library","components","designsystem","react","reactjs","styled-components","toolkit","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://flokit.iagodahlem.com/","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/iagodahlem.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":"2018-11-21T21:42:08.000Z","updated_at":"2023-03-22T12:49:46.000Z","dependencies_parsed_at":"2023-01-26T06:45:19.611Z","dependency_job_id":null,"html_url":"https://github.com/iagodahlem/flokit","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagodahlem%2Fflokit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagodahlem%2Fflokit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagodahlem%2Fflokit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagodahlem%2Fflokit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iagodahlem","download_url":"https://codeload.github.com/iagodahlem/flokit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246706298,"owners_count":20820784,"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":["component-library","components","designsystem","react","reactjs","styled-components","toolkit","ui","ui-components"],"created_at":"2025-04-01T19:50:20.374Z","updated_at":"2025-04-01T19:50:20.946Z","avatar_url":"https://github.com/iagodahlem.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iagodahlem/flokit/master/logo/logo.png\" alt=\"flokit\" height=\"320\" /\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  Toolkit for easily and smoothly building UIs with \u003ca href=\"https://reactjs.org/\"\u003eReact\u003c/a\u003e. As smooth as \u003ca href=\"https://en.wikipedia.org/wiki/Hrafna-Fl%C3%B3ki_Vilger%C3%B0arson\"\u003eFloki\u003c/a\u003e build ships.\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/iagodahlem/flokit\"\u003e\u003cimg src=\"https://img.shields.io/travis/iagodahlem/flokit/master.svg?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/flokit\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/flokit.svg?style=flat-square\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Getting Started\n\n### Install\n\nWith npm.\n\n```sh\nnpm install --save flokit\n```\n\nOr with yarn.\n\n```sh\nyarn add flokit\n```\n\n### Usage\n\nImport components directly from `flokit` to build and/or compose your UI or design system.\n\n```js\nimport { Flex } from 'flokit'\n\n\u003cFlex\n  width={1}\n  height={1}\n  alignItems='center'\n  justifyContent='center'\n\u003e\n  I'm a flexbox\n\u003c/Flex\u003e\n```\n\n## Props\n\nFlokit is built with [styled-system](https://styled-system.com) for theamable and responsive style props. So go check their docs if you are not familiar with it yet.\n\n### Strings\n\nStrings values are parsed to raw CSS values, you can use it to set non numerical property values, or to use custom units for numerical values, as `rem` or `em`. You can also use strings for setting values defined in the theme object, as for color values.\n\n```js\n// picks the value defined in `theme.colors['blue']`\n\u003cBox color='blue' /\u003e\n\n// picks up a nested color value using dot notation\n// `theme.colors['gray'][0]`\n\u003cBox color='gray.0' /\u003e\n\n// raw CSS color value\n\u003cBox color='#f00' /\u003e\n\n// width `'2em'`\n\u003cBox width='2em' /\u003e\n\n// sets margin `'auto'`\n\u003cBox m='auto' /\u003e\n\n// sets margin `'16rem'`\n\u003cBox m='16rem' /\u003e\n```\n\n### Numbers\n\nYou can use numbers as props in several ways to define property values.\n\n* For scale props as `const spaces = [0, 4, 8, 16, 32]` for defining `margin` and `padding`, you can use numbers from 0 to the length of the scale.\n\n```js\n// sets margin value of `theme.space[1]`\n\u003cBox m={1} /\u003e\n\n// sets a margin value of `16px` since it's greater than `theme.space.length`\n\u003cBox m={16} /\u003e\n```\n\n* For percentange values as `width` and `height` you can use numbers between 0-1. Numbers greater than 1 are transformed into raw pixel values.\n\n```js\n// width `33.3%`\n\u003cBox width={1/3} /\u003e\n\n// width `50%`\n\u003cBox width={1/2} /\u003e\n\n// width `100%`\n\u003cBox width={1} /\u003e\n\n// width `256px`\n\u003cBox width={256} /\u003e\n```\n\n### Arrays\n\nYou can use a shorthand array syntax to define responsive width, height, margin, padding, font-size and a lot of [other properties](https://styled-system.com/responsive-styles/).\n\n```js\n\u003cBox width={[1, 1/2, 1/4]} /\u003e\n```\n\nThis will map your array of values into mobile-first media queries, giving you the following:\n\n```css\n.Box {\n  width: 100%;\n}\n\n@media screen and (min-width: 40em) {\n  .Box {\n    width: 50%;\n  }\n}\n\n@media screen and (min-width: 52em) {\n  .Box {\n    width: 25%;\n  }\n}\n```\n\n## Components\n\n### Box\n\nPrimitive box-model component. Used as the base for all other components.\n\n```js\nimport { Box } from 'flokit'\n\n\u003cBox\u003e\n  I'm a box\n\u003c/Box\u003e\n```\n\n#### Props\n\n| Prop | CSS Property | Type | Theme |\n| :--- | :--- | :--- | :--- |\n| `position`              | `position`                         | `string`\\|`array`           | none |\n| `zIndex`                | `z-index`                          | `string`\\|`array`           | `zIndices` |\n| `top`                   | `top`                              | `string`\\|`array`           | none |\n| `right`                 | `right`                            | `string`\\|`array`           | none |\n| `bottom`                | `bottom`                           | `string`\\|`array`           | none |\n| `left`                  | `left`                             | `string`\\|`array`           | none |\n| `display`               | `display`                          | `string`\\|`array`           | none |\n| `width`                 | `width`                            | `string`\\|`number`\\|`array` | `sizes` |\n| `height`                | `height`                           | `string`\\|`number`\\|`array` | `sizes` |\n| `minWidth`              | `min-width`                        | `string`\\|`number`\\|`array` | `sizes` |\n| `maxWidth`              | `max-width`                        | `string`\\|`number`\\|`array` | `sizes` |\n| `minHeight`             | `min-height`                       | `string`\\|`number`\\|`array` | `sizes` |\n| `maxHeight`             | `max-height`                       | `string`\\|`number`\\|`array` | `sizes` |\n| `size`                  | `width` \u0026 `height`                 | `string`\\|`number`\\|`array` | `sizes` |\n| `verticalAlign`         | `vertical-align`                   | `string`\\|`array`           | none |\n| `overflow`              | `overflow`                         | `string`\\|`array`           | none |\n| `m`\\|`margin`           | `margin`                           | `string`\\|`number`\\|`array` | `space` |\n| `mt`\\|`marginTop`       | `margin-top`                       | `string`\\|`number`\\|`array` | `space` |\n| `mr`\\|`marginRight`     | `margin-right`                     | `string`\\|`number`\\|`array` | `space` |\n| `mb`\\|`marginBottom`    | `margin-bottom`                    | `string`\\|`number`\\|`array` | `space` |\n| `ml`\\|`marginLeft`      | `margin-left`                      | `string`\\|`number`\\|`array` | `space` |\n| `mx`\\|`marginX`         | `margin-left` \u0026 `margin-right`     | `string`\\|`number`\\|`array` | `space` |\n| `my`\\|`marginY`         | `margin-top` \u0026 `margin-bottom`     | `string`\\|`number`\\|`array` | `space` |\n| `p`\\|`padding`          | `padding`                          | `string`\\|`number`\\|`array` | `space` |\n| `pt`\\|`paddingTop`      | `padding-top`                      | `string`\\|`number`\\|`array` | `space` |\n| `pr`\\|`paddingRight`    | `padding-right`                    | `string`\\|`number`\\|`array` | `space` |\n| `pb`\\|`paddingBottom`   | `padding-bottom`                   | `string`\\|`number`\\|`array` | `space` |\n| `pl`\\|`paddingLeft`     | `padding-left`                     | `string`\\|`number`\\|`array` | `space` |\n| `px`                    | `padding-left` \u0026 `padding-right`   | `string`\\|`number`\\|`array` | `space` |\n| `py`                    | `padding-top` \u0026 `padding-bottom`   | `string`\\|`number`\\|`array` | `space` |\n| `background`            | `background`                       | `string`\\|`array`           | none |\n| `backgroundImage`       | `background-image`                 | `string`\\|`array`           | none |\n| `backgroundSize`        | `background-size`                  | `string`\\|`array`           | none |\n| `backgroundPosition`    | `background-position`              | `string`\\|`array`           | none |\n| `backgroundRepeat`      | `background-repeat`                | `string`\\|`array`           | none |\n| `border`                | `border`                           | `string`\\|`array`           | `borders` |\n| `borderWidth`           | `border-width`                     | `string`\\|`array`           | `borderWidths` |\n| `borderStyle`           | `border-style`                     | `string`\\|`array`           | `borderStyles` |\n| `borderColor`           | `border-color`                     | `string`\\|`array`           | `colors`  |\n| `borderRadius`          | `border-radius`                    | `string`\\|`number`\\|`array` | `radii` |\n| `borderTop`             | `border-top`                       | `string`\\|`array`           | `borders` |\n| `borderRight`           | `border-right`                     | `string`\\|`array`           | `borders` |\n| `borderBottom`          | `border-bottom`                    | `string`\\|`array`           | `borders` |\n| `borderLeft`            | `border-left`                      | `string`\\|`array`           | `borders` |\n| `textShadow`            | `text-shadow`                      | `string`\\|`array`           | `shadows` |\n| `boxShadow`             | `box-shadow`                       | `string`\\|`array`           | `shadows` |\n| `color`                 | `color`                            | `string`\\|`array`           | `colors` |\n| `bg`\\|`backgroundColor` | `background-color`                 | `string`\\|`array`           | `colors` |\n| `opacity`               | `opacity`                          | `string`\\|`array`           | none |\n| `flex`                  | `flex`                             | `string`\\|`array`           | none |\n| `flex-grow`             | `flex-grow`                        | `string`\\|`array`           | none |\n| `flex-shrink`           | `flex-shrink`                      | `string`\\|`array`           | none |\n| `flex-basis`            | `flex-basis`                       | `string`\\|`array`           | none |\n| `justifySelf`           | `justify-self`                     | `string`\\|`array`           | none |\n| `alignSelf`             | `align-self`                       | `string`\\|`array`           | none |\n| `order`                 | `order`                            | `string`\\|`array`           | none |\n\n### Flex\n\nPrimitive flexbox component. Extends `Box`.\n\n```js\nimport { Flex } from 'flokit'\n\n\u003cFlex alignItems='center'\u003e\n  I'm a flexbox\n\u003c/Flex\u003e\n```\n\n#### Props\n\n| Prop | CSS Property | Type | Theme |\n| :--- | :--- | :--- | :--- |\n| `alignItems`     | `align-items`     | `string`\\|`array` | none |\n| `alignContent`   | `align-content`   | `string`\\|`array` | none |\n| `justifyItems`   | `justify-items`   | `string`\\|`array` | none |\n| `justifyContent` | `justify-content` | `string`\\|`array` | none |\n| `flexWrap`       | `flex-wrap`       | `string`\\|`array` | none |\n| `flexDirection`  | `flex-direction`  | `string`\\|`array` | none |\n\n### Text\n\nPrimitive text component. Extends `Box`.\n\n```js\nimport { Text } from 'flokit'\n\n\u003cText alignItems='center'\u003e\n  I'm a text\n\u003c/Text\u003e\n```\n\n#### Props\n\n| Prop | CSS Property | Type | Theme |\n| :--- | :--- | :--- | :--- |\n| `fontFamily`    | `font-family`    | `string`\\|`number`\\|`array` | `fonts` |\n| `fontSize`      | `font-size`      | `string`\\|`number`\\|`array` | `fontSizes` |\n| `fontWeight`    | `font-weight`    | `string`\\|`number`\\|`array` | `fontWeights` |\n| `lineHeight`    | `line-height`    | `string`\\|`number`\\|`array` | `lineHeights` |\n| `letterSpacing` | `letter-spacing` | `string`\\|`number`\\|`array` | `letterSpacings` |\n| `fontStyle`     | `font-style`     | `string`\\|`number`\\|`array` | none |\n| `textAlign`     | `text-align`     | `string`\\|`number`\\|`array` | none |\n| `textTransform` | `text-transform` | `string`\\|`number`\\|`array` | none |\n\n### Heading\n\nPrimitive text component for headings. Extends `Text`.\n\n```js\nimport { Heading } from 'flokit'\n\n\u003cHeading alignItems='center'\u003e\n  I'm a heading\n\u003c/Heading\u003e\n```\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -m 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## License\n\n[MIT License](http://iagodahlem.mit-license.org/) © Iago Dahlem\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiagodahlem%2Fflokit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiagodahlem%2Fflokit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiagodahlem%2Fflokit/lists"}