Style Props

The Box component provides a minimal zero-runtime styling solution similar to Tailwind CSS built with Vanilla Extract.

We provide out of the box support for consuming our design tokens and commonly used styles via props, but developers are free to choose any styling solution for components with the use of className.

#

Documentation

#

Using style props

You can use props on the <Box /> component to control styles:

import { Box } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box bg="bg.success" color="fg.success" p="md">
      Using component props
    </Box>
  );
}

Learn more about consuming Design Tokens.

#

Applying conditionally

#

Breakpoints and media queries

You can also use object or array prop notation to apply styles at various responsive breakpoints.

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box bg="aqua.200" fontSize={["sm", "xl"]}>
        Contact
      </Box>
    </Canvas>
  );
}

Check out the documentation on Responsive Styles.