Getting Started

Server Components

Core

Pseudo-Elements

Container Queries

Gradients & Effects

Tailwind Parity

Components

Layout

Extensions

Resources

Theme

Version 3.3.3 is here!

Build beautiful UIs
without writing CSS

A utility-first React component library with type-safe props that map directly to CSS. Build faster, ship sooner.

Generated Once, Shared

Each prop value becomes one atomic class the first time it is used, then every component reuses it.

Type-Safe Props

Full TypeScript support with autocompletion for all CSS properties and values.

Beautiful Defaults

Pre-built component styles with variants. Customize everything or use as-is.

Composable

Build complex UIs by composing simple components. Props merge in order, so there is no specificity to reason about.

Prop Shortcuts

Use p for padding, m for margin, jc for justify-content, and more.

Responsive

Built-in breakpoints: sm, md, lg, xl, xxl. Mobile-first by default.

Get started in seconds

Install the package and start building beautiful interfaces immediately.

1. Install the package

Terminal

npm install @cronocode/react-box

2. Import and use

JSX

import Box from '@cronocode/react-box';

function App() {
  return (
    <Box p={4} bgColor="indigo-500" color="white" borderRadius={2}>
      Hello, React Box!
    </Box>
  );
}

3. Add responsive styles

JSX

import Flex from '@cronocode/react-box/components/flex';

<Flex
  p={4}
  d="column"
  gap={4}
  sm={{ p: 6, d: 'row' }}
  lg={{ p: 8 }}
>
  <Box flex1>Left</Box>
  <Box flex1>Right</Box>
</Flex>

Ready to build something amazing?

Join developers who are building faster with React Box.