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.

💡
Resize the canvas to see the layout change:
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.

Design Tokens