{"id":48793115,"url":"https://github.com/dash-ui/react-layout","last_synced_at":"2026-04-13T21:11:12.010Z","repository":{"id":40704243,"uuid":"257776490","full_name":"dash-ui/react-layout","owner":"dash-ui","description":"Layout primitives for React and @dash-ui, including Box, Cluster, Grid, Row, Column, and Layer.","archived":false,"fork":false,"pushed_at":"2023-10-17T09:31:20.000Z","size":1599,"stargazers_count":8,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-08T12:58:57.824Z","etag":null,"topics":["cluster","css-in-js","css-in-react","css-in-ts","dash","dash-ui","grid","layer","layout-components","layout-primitives","react-layout-components","react-layout-primitives","spacer-component","stack-component"],"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/dash-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-22T03:02:30.000Z","updated_at":"2023-11-07T11:43:12.000Z","dependencies_parsed_at":"2022-07-29T02:39:07.671Z","dependency_job_id":null,"html_url":"https://github.com/dash-ui/react-layout","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/dash-ui/react-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Freact-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Freact-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Freact-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Freact-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dash-ui","download_url":"https://codeload.github.com/dash-ui/react-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Freact-layout/sbom","scorecard":{"id":323646,"data":{"date":"2025-08-11","repo":{"name":"github.com/dash-ui/react-layout","commit":"fa031fa3d014a505957d0ae61cd7f4e96d8eaa92"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/25 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/react-layout/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/react-layout/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/react-layout/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/react-layout/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/react-layout/release.yml/main?enable=pin","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'","Warn: branch protection not enabled for branch 'alpha'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"22 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-f9xv-q969-pqx4"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T01:57:54.474Z","repository_id":40704243,"created_at":"2025-08-18T01:57:54.474Z","updated_at":"2025-08-18T01:57:54.474Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31770939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"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":["cluster","css-in-js","css-in-react","css-in-ts","dash","dash-ui","grid","layer","layout-components","layout-primitives","react-layout-components","react-layout-primitives","spacer-component","stack-component"],"created_at":"2026-04-13T21:11:07.929Z","updated_at":"2026-04-13T21:11:11.972Z","avatar_url":"https://github.com/dash-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003chr/\u003e\n\n\u003cimg src='https://github.com/dash-ui/styles/raw/main/assets/logo.png'/\u003e\n\n\u003e\n\n```sh\nnpm i @dash-ui/react-layout\n```\n\n\u003cp\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@dash-ui/react-layout\"\u003e\n    \u003cimg alt=\"Bundlephobia\" src=\"https://img.shields.io/bundlephobia/minzip/@dash-ui/react-layout?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Types\" href=\"https://www.npmjs.com/package/@dash-ui/react-layout\"\u003e\n    \u003cimg alt=\"Types\" src=\"https://img.shields.io/npm/types/@dash-ui/react-layout?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Code coverage report\" href=\"https://codecov.io/gh/dash-ui/react-layout\"\u003e\n    \u003cimg alt=\"Code coverage\" src=\"https://img.shields.io/codecov/c/gh/dash-ui/react-layout?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Build status\" href=\"https://github.com/dash-ui/react-layout/actions/workflows/release.yml\"\u003e\n    \u003cimg alt=\"Build status\" src=\"https://img.shields.io/github/workflow/status/dash-ui/react-layout/release/main?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/@dash-ui/react-layout\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@dash-ui/react-layout?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"https://jaredlunde.mit-license.org/\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/npm/l/@dash-ui/react-layout?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Features\n\n- [x] **Comprehensive** grids, rows, columns, and more.\n- [x] **Responsive props** add breakpoint-specific styles to your layout components.\n- [x] **CSS variable themes** mean performance is never going to be an issue when\n      users switch from light to dark mode.\n- [x] **Strong types** even when you use an `as` prop. If it's a button, you're\n      going to be limited to `\u003cbutton\u003e` HTML attributes!\n- [x] **Tiny** ([\u003c3.5kB](https://bundlephobia.com/result?p=@dash-ui/react-layout@latest)) as layout primitive libraries go\n\n## Quick start\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-example-3m3rg?file=/src/App.tsx)\n\n```jsx harmony\nimport * as React from \"react\";\nimport { createStyles } from \"@dash-ui/styles\";\nimport { LayoutProvider, Box } from \"@dash-ui/react-layout\";\n\n// These root variable tokens are required in order to access\n// all features of @dash-ui/react-layout\nconst tokens = {\n  // \"color\" is used for the \"bg\" prop on \u003cBox\u003e\n  color: {\n    primary: \"#ee5b5f\",\n  },\n  // \"elevation\" is used for the \"elevation\" prop on \u003cBox\u003e\n  // It adds a box shadow to components\n  elevation: {\n    sm: \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n    md: \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n  },\n  // \"pad\" is used for the \"pad\" prop\n  // It adds padding to components\n  pad: {\n    sm: \"0.5rem\",\n    md: \"1rem\",\n    lg: \"2rem\",\n  },\n  // \"gap\" is used for the \"gap\" prop\n  // It adds margins between child components\n  gap: {\n    sm: \"0.25rem\",\n    md: \"0.5rem\",\n    lg: \"1rem\",\n  },\n  // \"radius\" is used for the \"radius\" prop\n  // It adds border-radius to components\n  radius: {\n    sm: \"0.125rem\",\n    md: \"0.25rem\",\n  },\n};\n\nconst styles = createStyles({\n  tokens,\n});\n\nconst App = () =\u003e (\n  \u003cLayoutProvider\n    styles={styles}\n    mediaQueries={{\n      sm: \"only screen and (min-width: 0em)\",\n      md: \"only screen and (min-width: 35em)\",\n      lg: \"only screen and (min-width: 80em)\",\n    }}\n  \u003e\n    \u003cComponent /\u003e\n  \u003c/LayoutProvider\u003e\n);\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cBox size={300} pad={{ sm: \"md\", md: \"lg\" }}\u003e\n    Hello world\n  \u003c/Box\u003e\n);\n```\n\n## API docs\n\n### Components\n\n| Component                             | Description                                                                                                            |\n| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| [`\u003cLayoutProvider\u003e`](#layoutprovider) | A context provider which is only required if you intend on using responsive props or a custom `styles` instance.       |\n| [`\u003cBox\u003e`](#box)                       | A layout component for adding size, padding, position, color, and more using tokens from your CSS variable theme.      |\n| [`\u003cCluster\u003e`](#cluster)               | A row directional layout component that distributes its items in a cluster. Common use cases are tags and input chips. |\n| [`\u003cColumn\u003e`](#column)                 | A layout component that distributes its items in a column without wrapping or shrinking.                               |\n| [`\u003cFlexItem\u003e`](#flexitem)             | A layout component that can add positioning properties to itself inside of a flex container.                           |\n| [`\u003cGrid\u003e`](#grid)                     | A layout component that distributes its children in a grid. This an abstraction of CSS grids.                          |\n| [`\u003cGridItem\u003e`](#griditem)             | A layout component that can add positioning properties to itself inside of a [`\u003cGrid\u003e`](#grid) component.              |\n| [`\u003cLayer\u003e`](#layer)                   | A layout component that is a container for [`\u003cLayerItem\u003e`](#layeritem)s.                                               |\n| [`\u003cLayerItem\u003e`](#layeritem)           | A layout component than positions itself absolutely inside of its container in whichever placement you decide.         |\n| [`\u003cRow\u003e`](#row)                       | A layout component that distributes its items in a row without wrapping.                                               |\n\n### Hooks\n\n| Component                                       | Description                                                                                                         |\n| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| [`useResponsiveStyles()`](#useresponsivestyles) | Returns the [responsive `styles`](https://github.com/dash-ui/responsive) used for creating responsive layout props. |\n\n### TypeScript support\n\n`@dash-ui/react-layout` is written in TypeScript. That said, there are some things to know\nas it relates to connecting your `DashTokens` and media query types to these layout\ncomponents.\n\n|                                                               | Description                                |\n| ------------------------------------------------------------- | ------------------------------------------ |\n| [Strongly typed media queries](#strongly-typed-media-queries) | Learn how to add types to responsive props |\n| [Strongly typed tokens](#strongly-typed-tokens)               | Learn how to add types to your CSS tokens  |\n\n---\n\n## Components\n\n### \u0026lt;LayoutProvider\u0026gt;\n\nA context provider which is only required if you intend on using media query\nprops or a custom `styles` instance.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-example-3m3rg?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\nimport { LayoutProvider, Box } from \"@dash-ui/react-layout\";\n\nconst styles = createStyles();\n\nconst App = () =\u003e (\n  \u003cLayoutProvider\n    styles={styles}\n    mediaQueries={{\n      sm: \"only screen and (min-width: 0em)\",\n      md: \"only screen and (min-width: 35em)\",\n      lg: \"only screen and (min-width: 80em)\",\n    }}\n  \u003e\n    \u003cComponent /\u003e\n  \u003c/LayoutProvider\u003e\n);\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cBox size={300} pad={{ sm: \"md\", md: \"lg\" }}\u003e\n    Hello world\n  \u003c/Box\u003e\n);\n```\n\n#### Props\n\n| Prop         | Type                             | Default  | Required? | Description                                                                                                                                                        |\n| ------------ | -------------------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| styles       | `Styles\u003cDashTokens, DashThemes\u003e` | `styles` | No        | The `styles` instance you're using to create styles. By default this is the `styles` instance exported from [`@dash-ui/styles`](https://github.com/dash-ui/styles) |\n| mediaQueries | `Record\u003cstring, string\u003e`         |          | No        | A mapping of name/media query pairs. This is only required if youre' using responsive props.                                                                       |\n\n### \u0026lt;Box\u0026gt;\n\nA layout component for adding size, padding, position, color, and more using tokens\nfrom your CSS variable theme.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-box-example-tpsky?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Box } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cBox size={300} pad={{ sm: \"md\", md: \"lg\" }}\u003e\n    Hello world\n  \u003c/Box\u003e\n);\n```\n\n#### Props\n\n| Name      | Type                                                                                       | Required? | Description                                                                                                                                                                                                                                                                       |\n| --------- | ------------------------------------------------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| display   | `ResponsiveProp\u003c'flex' \\| 'inlineFlex' \\| 'block' \\| 'inlineBlock' \\| 'inline' \\| 'none'\u003e` | No        | Sets a `display` CSS property on your component.                                                                                                                                                                                                                                  |\n| position  | `ResponsiveProp\u003c'relative' \\| 'absolute' \\| 'sticky' \\| 'fixed'\u003e`                          | No        | Sets a `position` CSS property on your component.                                                                                                                                                                                                                                 |\n| width     | `ResponsiveProp\u003cnumber \\| string\u003e`                                                         | No        | Sets a `width` CSS property on your component.                                                                                                                                                                                                                                    |\n| height    | `ResponsiveProp\u003cnumber \\| string\u003e`                                                         | No        | Sets a `height` CSS property on your component.                                                                                                                                                                                                                                   |\n| size      | `ResponsiveProp\u003cnumber \\| string\u003e`                                                         | No        | Sets a `size` CSS property on your component.                                                                                                                                                                                                                                     |\n| pad       | `ResponsiveProp\u003ckeyof DashTokens['pad'] \\| (keyof DashTokens['pad'])[]\u003e`                   | No        | Sets a `padding` CSS property on your component using the \"pad\" token in your theme. When this is an array padding will be joined in the same order as the `padding` CSS property i.e. `['sm', 'md']` would be `padding: var(--pad-sm) var(--pad-md)`.                            |\n| bg        | `ResponsiveProp\u003ckeyof DashTokens['color']\u003e`                                                | No        | Sets a `background-color` CSS property on your component using the \"color\" token in your theme.                                                                                                                                                                                   |\n| elevation | `ResponsiveProp\u003ckeyof DashTokens['elevation']\u003e`                                            | No        | Sets a `box-shadow` CSS property on your component using the \"elevation\" token in your theme.                                                                                                                                                                                     |\n| radius    | `ResponsiveProp\u003ckeyof DashTokens['radius'] \\| (keyof DashTokens['radius'])[]\u003e`             | No        | Sets a `border-radius` CSS property on your component using the \"radius\" token in your theme. When this is an array padding will be joined in the same order as the `border-radius` CSS property i.e. `['sm', 'md']` would be `border-radius: var(--radius-sm) var(--radius-md)`. |\n| className | `string \\| string[]`                                                                       | No        | Adds one or several class names to your component.                                                                                                                                                                                                                                |\n\n### \u0026lt;Cluster\u0026gt;\n\nA row directional layout component that distributes its items in\na cluster. Common use cases are tags and input chips.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-cluster-example-y0p5c?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Cluster, Box } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cCluster width={{ sm: \"100%\", md: 400 }} gap={{ sm: \"sm\", md: \"md\" }}\u003e\n    \u003cBox bg=\"primary\" width={100} height={24} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" width={140} height={24} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" width={80} height={24} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" width={90} height={24} radius=\"md\" /\u003e\n  \u003c/Cluster\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 In addition to the props below, `\u003cRow\u003e` inherits all props from [`\u003cBox\u003e`](#box).\n\n| Name    | Type                                      | Required? | Description                                                                                                       |\n| ------- | ----------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------- |\n| gap     | `ResponsiveProp\u003ckeyof DashTokens['gap']\u003e` | No        | Sets a vertical and horizontal gap between the child elements in the cluster using the \"gap\" token in your theme. |\n| reverse | `ResponsiveProp\u003cboolean\u003e`                 | No        | Reverses the direction of your cluster so that it lays out right-to-left.                                         |\n\n### \u0026lt;Column\u0026gt;\n\nA layout component that distributes its items in a column without wrapping\nor shrinking.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-column-example-e81yl?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Column, Box } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cColumn width=\"100%\" gap={{ sm: \"sm\", md: \"md\" }}\u003e\n    \u003cBox bg=\"primary\" height={100} width=\"100%\" radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={140} width=\"100%\" radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={80} width=\"100%\" radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={90} width=\"100%\" radius=\"md\" /\u003e\n  \u003c/Column\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 In addition to the props below, `\u003cColumn\u003e` inherits all props from [`\u003cBox\u003e`](#box).\n\n| Name    | Type                                      | Required? | Description                                                                         |\n| ------- | ----------------------------------------- | --------- | ----------------------------------------------------------------------------------- |\n| gap     | `ResponsiveProp\u003ckeyof DashTokens['gap']\u003e` | No        | Sets a vertical gap between its child elements using the \"gap\" token in your theme. |\n| reverse | `ResponsiveProp\u003cboolean\u003e`                 | No        | Reverses the direction of the column to bottom-to-top                               |\n\n### \u0026lt;FlexItem\u0026gt;\n\nA layout component that can add positioning properties to itself inside of\na flex container.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-flexitem-example-mbmu2?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { FlexItem, Box, Row } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cRow align=\"start\" width=\"100%\" gap={{ sm: \"sm\", md: \"md\" }}\u003e\n    {/* This item will be aligned in the center */}\n    \u003cFlexItem\n      align=\"center\"\n      bg=\"primary\"\n      width={100}\n      height={120}\n      radius=\"md\"\n    /\u003e\n    {/* These will both align at flex-start */}\n    \u003cBox bg=\"primary\" width={140} height={140} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" width={80} height={124} radius=\"md\" /\u003e\n  \u003c/Row\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 In addition to the props below, `\u003cFlexItem\u003e` inherits all props from [`\u003cBox\u003e`](#box).\n\n| Name      | Type                                                                      | Required? | Description                                          |\n| --------- | ------------------------------------------------------------------------- | --------- | ---------------------------------------------------- |\n| align     | `ResponsiveProp\u003c'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'\u003e` | No        | Sets a `align-self` CSS property on your component.  |\n| basis     | `ResponsiveProp\u003cnumber \\| string\u003e`                                        | No        | Sets a `flex-basis` CSS property on your component.  |\n| grow      | `ResponsiveProp\u003cboolean \\| number\u003e`                                       | No        | Sets a `flex-grow` CSS property on your component.   |\n| maxWidth  | `ResponsiveProp\u003cnumber \\| string\u003e`                                        | No        | Sets a `max-width` CSS property on your component.   |\n| maxHeight | `ResponsiveProp\u003cnumber \\| string\u003e`                                        | No        | Sets a `max-height` CSS property on your component.  |\n| order     | `ResponsiveProp\u003cnumber\u003e`                                                  | No        | Sets a `order` CSS property on your component.       |\n| shrink    | `ResponsiveProp\u003cboolean \\| number\u003e`                                       | No        | Sets a `flex-shrink` CSS property on your component. |\n\n### \u0026lt;Grid\u0026gt;\n\nA layout component that distributes its children in a grid. This an abstraction\nof CSS grids.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-grid-example-okqnz?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Grid, Box } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cGrid cols={3} rows={3} gap={{ sm: \"sm\", md: \"md\" }}\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" height={100} radius=\"md\" /\u003e\n  \u003c/Grid\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 In addition to the props below, `\u003cGrid\u003e` inherits all props from [`\u003cBox\u003e`](#box),\n\u003e omitting `display` which is always `\"grid\"`.\n\n| Name        | Type                                                                                             | Required? | Description                                                                                                   |\n| ----------- | ------------------------------------------------------------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------- |\n| alignX      | `ResponsiveProp\u003c'start' \\| 'center' \\| 'end' \\| 'stretch'\u003e`                                      | No        | Sets a `justify-items` CSS property on your component.                                                        |\n| alignY      | `ResponsiveProp\u003c'start' \\| 'center' \\| 'end' \\| 'stretch'\u003e`                                      | No        | Sets a `align-items` CSS property on your component.                                                          |\n| cols        | `ResponsiveProp\u003cnumber \\| (number \\| string)[]\u003e`                                                 | No        | Sets a `grid-template-columns` CSS property on your component.                                                |\n| distributeX | `ResponsiveProp\u003c'start' \\| 'center' \\| 'end' \\| 'stretch' \\| 'around' \\| 'between' \\| 'evenly'\u003e` | No        | Sets a `justify-content` CSS property on your component.                                                      |\n| distributeY | `ResponsiveProp\u003c'start' \\| 'center' \\| 'end' \\| 'stretch' \\| 'around' \\| 'between' \\| 'evenly'\u003e` | No        | Sets a `align-content` CSS property on your component.                                                        |\n| gap         | [`ResponsiveProp\u003cGapProp\u003e`](#gapprop)                                                            | No        | Sets a horizontal and vertical gap between the child elements in the row using the \"gap\" token in your theme. |\n| inline      | `ResponsiveProp\u003cboolean\u003e`                                                                        | No        | Makes the component display as an `inline-grid` rather than `grid`.                                           |\n| rows        | `ResponsiveProp\u003cnumber \\| (number \\| string)[]\u003e`                                                 | No        | Sets a `grid-template-rows` CSS property on your component.                                                   |\n\n#### GapProp\n\n```typescript\ntype GapProp =\n  | keyof DashTokens[\"gap\"]\n  | [keyof DashTokens[\"gap\"], keyof DashTokens[\"gap\"]];\n```\n\n### \u0026lt;GridItem\u0026gt;\n\nA layout component that can add positioning properties to itself inside of\na [`\u003cGrid\u003e`](#grid) component.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-griditem-example-c1tc7?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Grid, GridItem, Box } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  \u003cGrid cols={3} rows={[100, 100]} gap={{ sm: \"sm\", md: \"md\" }}\u003e\n    {/* This item spans 3 columns */}\n    \u003cGridItem bg=\"primary\" colStart={1} colEnd={4} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" radius=\"md\" /\u003e\n  \u003c/Grid\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 In addition to the props below, `\u003cGridItem\u003e` inherits all props from [`\u003cBox\u003e`](#box).\n\n| Name     | Type                                                        | Required? | Description                                                |\n| -------- | ----------------------------------------------------------- | --------- | ---------------------------------------------------------- |\n| alignX   | `ResponsiveProp\u003c'start' \\| 'center' \\| 'end' \\| 'stretch'\u003e` | No        | Sets a `justify-self` CSS property on your component.      |\n| alignY   | `ResponsiveProp\u003c'start' \\| 'center' \\| 'end' \\| 'stretch'\u003e` | No        | Sets a `align-self` CSS property on your component.        |\n| colStart | `ResponsiveProp\u003cnumber \\| string\u003e`                          | No        | Sets a `grid-column-start` CSS property on your component. |\n| colEnd   | `ResponsiveProp\u003cnumber \\| string\u003e`                          | No        | Sets a `grid-column-end` CSS property on your component.   |\n| rowStart | `ResponsiveProp\u003cnumber \\| string\u003e`                          | No        | Sets a `grid-row-start` CSS property on your component.    |\n| rowEnd   | `ResponsiveProp\u003cnumber \\| string\u003e`                          | No        | Sets a `grid-row-end` CSS property on your component.      |\n\n### \u0026lt;Layer\u0026gt;\n\nA layout component that is a container for [`\u003cLayerItem\u003e`](#layeritem)s.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-layer-and-layeritem-example-we2by?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Layer, LayerItem } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cLayer width={600} height={600}\u003e\n    \u003cLayerItem placement=\"bottomRight\" bg=\"primary\" size={64} radius=\"md\" /\u003e\n    \u003cLayerItem placement=\"topLeft\" bg=\"primary\" size={64} radius=\"md\" /\u003e\n  \u003c/Layer\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 `\u003cLayer\u003e` inherits all of its props from [`\u003cBox\u003e`](#box),\n\u003e omitting `position` which is always `\"relative\"`.\n\n### \u0026lt;LayerItem\u0026gt;\n\nA layout component than positions itself absolutely inside of its container\nin whichever placement you decide.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-layer-and-layeritem-example-we2by?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Layer, LayerItem } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cLayer width={400} height={400}\u003e\n    \u003cLayerItem placement=\"bottomRight\" bg=\"primary\" size={64} radius=\"md\" /\u003e\n    \u003cLayerItem placement=\"topLeft\" bg=\"primary\" size={64} radius=\"md\" /\u003e\n  \u003c/Layer\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 In addition to the props below, `\u003cLayerItem\u003e` inherits all props from [`\u003cBox\u003e`](#box).\n\n| Name      | Type                                        | Required? | Description                                                                                       |\n| --------- | ------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------- |\n| offset    | `ResponsiveProp\u003cnumber \\| string\u003e`          | No        | Sets a `margin` between the edges of the layer item's container.                                  |\n| placement | [`ResponsiveProp\u003cPlacements\u003e`](#placements) | Yes       | Sets the placement of your layer item relative to its container. See [`Placements`](#placements). |\n| z         | `ResponsiveProp\u003cnumber\u003e`                    | No        | Sets a `z-index` CSS property on your component.                                                  |\n\n#### Placements\n\n```typescript\ntype Placements =\n  | \"top\"\n  | \"right\"\n  | \"bottom\"\n  | \"left\"\n  | \"center\"\n  | \"topLeft\"\n  | \"topRight\"\n  | \"bottomRight\"\n  | \"bottomLeft\";\n```\n\n### \u0026lt;Row\u0026gt;\n\nA layout component that distributes its items in a row without wrapping\nor shrinking.\n\n#### Example\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-row-example-ysvex?file=/src/App.tsx)\n\n```tsx\nimport * as React from \"react\";\nimport { Row, Box } from \"@dash-ui/react-layout\";\n\nconst Component = () =\u003e (\n  // Responsive props are opt-in. In order to use them\n  // you have to define a \"mediaQueries\" prop on your\n  // \u003cLayoutProvider\u003e\n  \u003cRow width=\"100%\" gap={{ sm: \"sm\", md: \"md\" }}\u003e\n    \u003cBox bg=\"primary\" width={100} height={120} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" width={140} height={140} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" width={80} height={124} radius=\"md\" /\u003e\n    \u003cBox bg=\"primary\" width={90} height={96} radius=\"md\" /\u003e\n  \u003c/Row\u003e\n);\n```\n\n#### Props\n\n\u003e 🔆 In addition to the props below, `\u003cRow\u003e` inherits all props from [`\u003cBox\u003e`](#box).\n\n| Name    | Type                                      | Required? | Description                                                                           |\n| ------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------- |\n| gap     | `ResponsiveProp\u003ckeyof DashTokens['gap']\u003e` | No        | Sets a horizontal gap between its child elements using the \"gap\" token in your theme. |\n| reverse | `ResponsiveProp\u003cboolean\u003e`                 | No        | Reverses the direction of the column to right-to-left                                 |\n\n## Hooks\n\n### useResponsiveStyles()\n\nReturns the [responsive `styles`](https://github.com/dash-ui/responsive)\nused for creating responsive layout props.\n\n#### Returns\n\n```typescript\n// See https://github.com/dash-ui/responsive\nResponsiveStyles\u003cDashTokens, MediaQueries, DashThemeNames\u003e\n```\n\n## TypeScript Support\n\n### Strongly typed media queries\n\nTo use media query types with `@dash-ui/react-layout`, you have to use the module declaration\npattern:\n\n[Play with this example on **CodeSandbox**](https://codesandbox.io/s/dash-uireact-layout-example-3m3rg?file=/src/App.tsx)\n\n```typescript\nconst mediaQueries = {\n  sm: \"only screen and (min-width: 0em)\",\n  md: \"only screen and (min-width: 35em)\",\n  lg: \"only screen and (min-width: 80em)\",\n} as const;\n\ntype AppMediaQueries = typeof mediaQueries;\n\ndeclare module \"@dash-ui/react-layout\" {\n  export interface MediaQueries extends AppMediaQueries {}\n}\n\n// OR alternatively\ndeclare module \"@dash-ui/react-layout\" {\n  export interface MediaQueries {\n    sm: string;\n    md: string;\n    lg: string;\n  }\n}\n```\n\n### Strongly typed tokens\n\nTo use variable types with `@dash-ui/react-layout`, you have to use the module declaration\npattern:\n\n[Play with this example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-strongly-typed-tokens-example-2-yk9bc?file=/src/App.tsx)\n\n```typescript\nconst tokens = {\n  color: {\n    red: \"#c17\",\n  },\n};\n\ntype AppTokens = typeof tokens;\n\ndeclare module \"@dash-ui/styles\" {\n  export interface DashTokens extends AppTokens {}\n}\n\n// OR alternatively\ndeclare module \"@dash-ui/styles\" {\n  export interface DashTokens {\n    color: {\n      red: string;\n    };\n  }\n}\n```\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash-ui%2Freact-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdash-ui%2Freact-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash-ui%2Freact-layout/lists"}