Skip to Content
StylingStyle Props

Style Props

The Box component provides a minimal zero-runtime styling solution 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.

#

Documentation

#

Utility based styling

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

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

Learn more about consuming Design Tokens.

#

Breakpoints and media queries

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

import { Box, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection={["column", "row"]}>
      <Box bg="bg.success.subtle" color="fg.success.strong" p="16">
        Item 1
      </Box>
      <Box bg="bg.success.subtle" color="fg.success.strong" p="16">
        Item 2
      </Box>
    </Flex>
  );
}

Check out the documentation on Responsive Styles.

Last updated on
Design Tokens