Box

Box is the base component for all UI components and provides a convenient way to use our design tokens and set element styles without having to write any custom CSS.

#

Documentation

#

Using design tokens

import { Box } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box bg="bg.information" m="lg" p="lg" rounded="sm">
      This is a Box
    </Box>
  );
}

#

Composition

Box component uses the @radix-ui Composition approach and accepts an asChild prop. By default it renders a div element but when asChild is set to true it will instead render its child element.

import { Box } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [isHovered, setIsHovered] = useState(false);
 
  return (
    <Box
      asChild
      bg="bg.information"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      p="xs"
      rounded="md"
    >
      <span>I am a span {isHovered && "hovered"}</span>
    </Box>
  );
}

#

BoxProps

We export a BoxProps generic type that can be used to define prop types for components that extend Box.

The first argument is the element or component type which defaults to div.

The second argument is any additional custom prop types that component accepts.

import { Box, type BoxProps, extractSprinkles } from "@optiaxiom/react";
import { forwardRef } from "react";
 
type ButtonProps = BoxProps<"button", { icon?: string }>;
 
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, icon, ...props }, ref) => {
    const { restProps, sprinkleProps } = extractSprinkles(props);
 
    return (
      <Box asChild {...sprinkleProps}>
        <button ref={ref} {...restProps}>
          {icon}
          {children}
        </button>
      </Box>
    );
  },
);
 
Button.displayName = "@optiaxiom/docs/Button";

#

Props

#

Box

#

Changelog

#

0.1.0

• Added component