ui-kit/chakra
A Chakra UI Playground and Online Editor, Live
Compose a Chakra UI interface from style props and composable components and watch it render live as you type, with npm and nothing to install.
import { Box, Heading, Button } from '@chakra-ui/react';
export default function Card() {
return (
<Box p={6} bg="gray.800" rounded="xl" shadow="lg">
<Heading size="md" color="teal.300">Ship faster</Heading>
<Button mt={4} colorScheme="teal">Get started</Button>
</Box>
);
}01 platform
What style props change about writing components
Chakra UI's idea is that most styling belongs on the component as props, not in a separate stylesheet. The editor is where that clicks — you write p={6} and see the padding, without leaving the JSX.
-
Style is a prop
p,bg,rounded,mt— spacing, color and layout are props read from the theme, so a component's look lives with its markup and stays on the design scale. -
Components compose
Box, Stack, Flex and Grid are the primitives; everything else builds from them, so a layout is a small tree of composable parts rather than bespoke CSS.
-
Real React and Chakra
@chakra-ui/reactresolves from npm through esm.sh and runs against the real React runtime, so behavior and props match the Chakra docs. -
A project, not a snippet
Split components across files, add TypeScript, keep a theme, and commit with Git — the shape of an actual Chakra app.
02 deep dive
Composable components and the hooks behind them
Chakra pairs style props with a set of hooks that handle the stateful parts of a UI, and both are one import away.
Props map to the theme. bg="teal.300" and p={6} resolve to theme colors and spacing, so values stay consistent and a token change moves everything that used it.
Hooks handle behavior. useDisclosure drives a modal or drawer's open state, useColorMode flips light and dark — the interactive plumbing comes with the library rather than being rebuilt.
Responsive is an array. p={{ base: 4, md: 8 }} sets a value per breakpoint, so a responsive layout is a prop, not a media query you maintain.
- spacing
- p, m, gap
- color
- bg, color (tokens)
- state
- useDisclosure
- responsive
- { base, md }
import { useDisclosure, Button, Modal } from '@chakra-ui/react';
const { isOpen, onOpen, onClose } = useDisclosure();
// <Button onClick={onOpen}>Open</Button>
// <Modal isOpen={isOpen} onClose={onClose}> … </Modal>03 features
What ships with a Chakra UI project
Everything below is on the moment you open the Chakra UI editor, which starts as a searchable team directory built from style props.
-
npm without a wait
@chakra-ui/react and its peers resolve through esm.sh into a native import map, ready on the next render with no node_modules.
-
Live preview, four ways
Full width, split, in device frames or its own tab — so a responsive layout built from prop arrays is something you check.
-
The VS Code engine
Monaco with IntelliSense against Chakra's props, multi-cursor and the command palette.
-
TypeScript included
Chakra ships types; write
.tsxfor autocomplete on props and the theme, stripped on the fast path. -
Color mode built in
Light and dark come from
useColorModeand the theme, so both are one toggle rather than two stylesheets. -
Git and export
Commit through isomorphic-git and export the project as a zip that runs anywhere.
04 deep dive
Theming with tokens and color modes
Style props are only consistent because they read from a theme, and the editor makes that theme a live thing to shape.
Tokens name your scale. Colors, spacing, radii and fonts are named tokens — teal.300, xl, lg — so props reference meaning rather than raw values, and the meaning is defined once.
Extend, don't fight. extendTheme adds brand colors and component defaults to Chakra's base, so customization is additive and the preview reflects it immediately.
Color mode is part of the theme. Light and dark values live in the theme's semantic tokens, so useColorMode flips the whole interface from one definition rather than duplicated styles.
- tokens
- colors, space, radii
- extend
- extendTheme
- modes
- light / dark
- semantic
- tokens per mode
import { extendTheme } from '@chakra-ui/react';
const theme = extendTheme({
colors: { brand: { 500: '#6d28d9' } },
config: { initialColorMode: 'dark' },
});05 workflow
From a style prop to a themed card grid
No install, no bundler, no dev server — the whole loop from a single style prop to a responsive, themed layout.
- new project → Chakra Team Directory
- created App.jsx · @chakra-ui/react via esm.sh
- set p={{ base: 4, md: 8 }} on the grid
- preview: padding responds at the breakpoint
- toggle color mode to dark
- whole grid re-themed from tokens
- git commit -m "responsive dark directory"
- [main 9f3ac10] responsive dark directory · 3 files
-
Style stays in the JSX
Because styling is props, a component's look and structure are read in one place, not across a component and a stylesheet.
-
The same loop on a tablet
React and Chakra run client-side, so an iPad renders the interface the same way a laptop does.
-
Share by link
Send a live preview URL and the recipient sees the themed, responsive interface, not a screenshot.
06 ecosystem
Chakra UI among the component kits
Chakra is one of several component systems the editor runs — the same tab compiles React with the UI kit of your choice, per file.
07 languages
What the editor compiles around Chakra UI
A Chakra UI project sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
Chakra UI in the browser — common questions
Do I need to install anything to use Chakra UI?
No. @chakra-ui/react resolves from npm through esm.sh into a native import map, so importing components and hooks works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.
Is this the real Chakra UI?
Yes, the published @chakra-ui/react package running against the real React runtime, so style props, components, hooks and behavior match the Chakra documentation rather than a lookalike.
How do style props work?
Props like p, bg, rounded and mt map to values in the theme — spacing, colors, radii — so styling lives on the component and stays consistent. Responsive values use an object per breakpoint, such as p={{ base: 4, md: 8 }}.
Can I customize the theme and color mode?
Yes. extendTheme adds brand colors and component defaults to Chakra's base, and useColorMode flips light and dark from the theme's tokens, so both modes come from one definition and update live in the preview.
Do Chakra hooks like useDisclosure work?
Yes. The hooks run against the real React runtime, so useDisclosure driving a modal's open state and useColorMode toggling the theme behave exactly as the docs describe.
Can I use TypeScript with Chakra?
Yes. Chakra ships type definitions, so .tsx gives autocomplete on props and the theme, with the types stripped on the fast pass that compiles the code.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Chakra UI editor now
A themed, responsive Chakra interface on screen in under a minute — live preview, npm, with no account wall and nothing to install.