Gathering detailed insights and metrics for @chakra-ui/layout
Gathering detailed insights and metrics for @chakra-ui/layout
Chakra UI is a component system for building SaaS products with speed ⚡️
Installations
npm install @chakra-ui/layoutDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
18.17.1
NPM Version
9.6.7
Releases
3,516
@chakra-ui/cli@3.22.0
@chakra-ui/cli@3.22.0
Updated on Jul 07, 2025
@chakra-ui/panda-preset@3.22.0
@chakra-ui/panda-preset@3.22.0
Updated on Jul 07, 2025
@chakra-ui/react@3.22.0
@chakra-ui/react@3.22.0
Updated on Jul 07, 2025
@chakra-ui/charts@3.22.0
@chakra-ui/charts@3.22.0
Updated on Jul 07, 2025
@chakra-ui/panda-preset@3.21.1
@chakra-ui/panda-preset@3.21.1
Updated on Jun 28, 2025
@chakra-ui/charts@3.21.1
@chakra-ui/charts@3.21.1
Updated on Jun 28, 2025
Languages
6
TypeScript
MDX
JavaScript
CSS
HTML
Dockerfile
TypeScript (82.17%)
MDX (16.98%)
JavaScript (0.7%)
CSS (0.07%)
HTML (0.06%)
Dockerfile (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
39,366 Stars
10,970 Commits
3,443 Forks
201 Watchers
11 Branches
696 Contributors
Updated on Jul 16, 2025
Maintainers
2
Package Meta Information
Latest Version
2.3.1
Package Id
@chakra-ui/layout@2.3.1
Unpacked Size
422.04 kB
Size
80.32 kB
File Count
233
NPM Version
9.6.7
Node Version
18.17.1
Published on
Sep 08, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
@chakra-ui/layout
A set of layout primitives that make it super easy to manage page and components.
Installation
1yarn add @chakra-ui/layout 2 3# or 4 5npm i @chakra-ui/layout
Import Components
1import { Box, Flex, Stack, Grid, Wrap, AspectRatio } from "@chakra-ui/layout"Usage
Box is just a div on steroids. It gives you the ability to pass style props
1<Box color="tomato" _hover={{ bg: "red.500", color: "white" }}> 2 Welcome to Box 3</Box>
Flex is just a Box with display: flex
1<Flex> 2 <Box flex="1">Box 1</Box> 3 <Box>Box 2</Box> 4</Flex>
Stack is used to group elements and apply a spacing between them. It stacks its children vertically by default.
1<Stack spacing="20px">
2 <Box>Box 1</Box>
3 <Box>Box 2</Box>
4</Stack>AspectRatio is used to constrain its child to specific aspect ratio. It is mostly used for embedding videos, images, and maps.
1<AspectRatio ratio={16 / 9}> 2 <img src="./some-ig-story" alt="Instagram story" /> 3</AspectRatio>
Wrap is used to manage the distribution of child elements that are liable to wrap. It is mostly used for button groups, tag group, badge group, and chips.
1<Wrap spacing={3}> 2 <Box>Box 1</Box> 3 <Box>Box 2</Box> 4</Wrap>
Badge is used to render a badge. It can come in different variants and color
schemes as defined in the theme.components.Badge
1<Badge variant="solid" colorScheme="green"> 2 Verified <FaCheck /> 3</Badge>
Center is used to vertically and horizontally center its child
1<Center bg="blue.500" borderRadius="4px" boxSize="40px"> 2 <FaPhoneIcon /> 3</Center>
Container is used to manage content areas on a website or blog. It centers
itself using margin-left: auto and margin-right: auto. It also applies a
default max-width of 60ch (60 characters)
1<Container> 2 <BlogContent /> 3</Container>
Spacer is a component that takes up the remaining space in a flex container. It is mostly useful to manage space and wrapping in flex containers
1<Flex> 2 <Box boxSize="40px" /> 3 <Spacer /> 4 <Box boxSize="40px" /> 5</Flex>
No vulnerabilities found.
Reason
30 commit(s) and 15 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-f7f6-9jq7-3rqj
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Reason
Found 5/25 approved changesets -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issue-stale.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/issue-stale.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/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/chakra-ui/chakra-ui/release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/release.yml/main?enable=pin
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:1
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:6
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:11
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:17: pin your Docker image by updating node:20-alpine to node:20-alpine@sha256:fa316946c0cb1f041fe46dda150f3085b71168555e5706ec0c7466a5bae12244
- Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 4 containerImage dependencies pinned
- Info: 2 out of 2 npmCommand dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: topLevel 'actions' permission set to 'write': .github/workflows/issue-stale.yml:10
- Warn: no topLevel permission defined: .github/workflows/quality.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
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
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 11 are checked with a SAST tool
Score
4.4
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More