Chakra UI online editor

Write, Run & Share Chakra UI code online using OneCompiler's Chakra UI online editor for free. It's one of the robust, feature-rich online editors for Chakra UI. Getting started with the OneCompiler's Chakra UI online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Chakra UI' and start writing code to learn and test online without worrying about tedious process of installation.

About Chakra UI

Chakra UI is a React component library you style with props instead of a separate stylesheet. Set padding, color, or margin right on the component (p, color, mt) and Chakra turns those into real CSS through Emotion. Components are accessible by default, and a theme object lets you define your own tokens and color modes.

Syntax help

Setup with ChakraProvider

Wrap your app in ChakraProvider once. It supplies the theme and base styles that every Chakra component relies on.

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

function App() {
  return (
    <ChakraProvider>
      <Box p={6}>Hello Chakra</Box>
    </ChakraProvider>
  );
}

Style props

Most CSS properties have a short prop name. You write the value as a prop, and responsive values go in an array that maps to breakpoints.

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

<Box
  p={4}
  bg="teal.500"
  color="white"
  borderRadius="md"
  fontSize={['sm', 'md', 'lg']}
>
  Styled with props
</Box>

Buttons

Button takes a colorScheme, a variant (solid, outline, ghost, link), and a size. Loading and disabled states are built in.

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

<Button colorScheme="teal">Solid</Button>
<Button colorScheme="teal" variant="outline">Outline</Button>
<Button isLoading loadingText="Saving">Save</Button>

Layout

Stack, Flex, and Grid handle arrangement. Stack spaces children evenly; HStack and VStack are the horizontal and vertical shortcuts.

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

<HStack spacing={4}>
  <Box>Left</Box>
  <Box>Right</Box>
</HStack>

<VStack spacing={2} align="stretch">
  <Box>Top</Box>
  <Box>Bottom</Box>
</VStack>

Forms

Pair FormControl with FormLabel and an input so the label, error text, and field stay connected for screen readers.

import { FormControl, FormLabel, Input, FormHelperText } from '@chakra-ui/react';

<FormControl>
  <FormLabel>Email</FormLabel>
  <Input type="email" placeholder="[email protected]" />
  <FormHelperText>We'll never share it.</FormHelperText>
</FormControl>

Theme and color mode

Extend the default theme with your own tokens, then read them by name anywhere. useColorMode flips between light and dark.

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

const theme = extendTheme({
  colors: { brand: { 500: '#5c6ac4' } },
});

function Toggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  return <Button onClick={toggleColorMode}>{colorMode} mode</Button>;
}

// <ChakraProvider theme={theme}> ... </ChakraProvider>