Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@chakra-ui/react

Package Overview
Dependencies
Maintainers
2
Versions
859
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chakra-ui/react

Responsive and accessible React UI components built with React and Emotion

  • 0.0.0-v2-latest-20241002174536
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
476K
decreased by-21.89%
Maintainers
2
Weekly downloads
 
Created

What is @chakra-ui/react?

@chakra-ui/react is a simple, modular, and accessible component library that gives you the building blocks you need to build your React applications. It provides a set of accessible, reusable, and composable React components that make it easy to create beautiful and responsive user interfaces.

What are @chakra-ui/react's main functionalities?

Responsive Design

Chakra UI provides responsive design utilities that allow you to easily create responsive layouts. The `Box` component in this example adjusts its width based on the screen size.

import { Box } from '@chakra-ui/react';

function ResponsiveBox() {
  return (
    <Box w={{ base: '100%', md: '50%' }} p={4} bg='tomato'>
      This box is responsive
    </Box>
  );
}

Theming

Chakra UI allows you to extend and customize the default theme to match your design requirements. This example demonstrates how to create a custom theme and apply it to a `Box` component.

import { ChakraProvider, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    primary: {
      100: '#E3F2F9',
      200: '#C5E4F3',
      300: '#A2D4EC',
      400: '#7AC1E4',
      500: '#47A9DA',
      600: '#0088CC',
      700: '#007AB8',
      800: '#006BA1',
      900: '#005885',
    },
  },
});

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box bg='primary.500' color='white' p={4}>
        Custom Themed Box
      </Box>
    </ChakraProvider>
  );
}

Accessibility

Chakra UI components are built with accessibility in mind. This example shows an accessible `Button` component with an `aria-label` attribute.

import { Button } from '@chakra-ui/react';

function AccessibleButton() {
  return (
    <Button colorScheme='blue' aria-label='Submit Form'>
      Submit
    </Button>
  );
}

Composability

Chakra UI components are designed to be composable, allowing you to build complex UIs from simple building blocks. This example demonstrates how to use `Box` and `Stack` components together.

import { Box, Text, Stack } from '@chakra-ui/react';

function ComposableComponent() {
  return (
    <Stack spacing={4} direction='row' align='center'>
      <Box p={5} shadow='md' borderWidth='1px'>
        <Text mt={4}>Box 1</Text>
      </Box>
      <Box p={5} shadow='md' borderWidth='1px'>
        <Text mt={4}>Box 2</Text>
      </Box>
    </Stack>
  );
}

Other packages similar to @chakra-ui/react

Keywords

FAQs

Package last updated on 02 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc