Skip to Content
StylingWidth

Width

Use w prop to control the width of an element.

Name

Styles

2xs
xs
sm
md
lg
xl
3xl
10
12
16
20
24
32
40
48
56
64
80
224
384
1/2
1/3
1/4
2/3
3/4
auto
fit
full
max
min

#

Documentation

#

Usage

w=384
w=224
w=3xl
w=64
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <DemoBox display={["none", "grid"]} w="384">
        w=384
      </DemoBox>
      <DemoBox w="224">w=224</DemoBox>
      <DemoBox w="3xl">w=3xl</DemoBox>
      <DemoBox w="64">w=64</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#

Percentage

w=1/2
w=1/2
w=1/3
w=2/3
w=1/4
w=3/4
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16" w="full">
      <Group gap="16">
        <DemoBox w="1/2">w=1/2</DemoBox>
        <DemoBox w="1/2">w=1/2</DemoBox>
      </Group>
      <Group gap="16">
        <DemoBox w="1/3">w=1/3</DemoBox>
        <DemoBox w="2/3">w=2/3</DemoBox>
      </Group>
      <Group display={["none", "flex"]} gap="16">
        <DemoBox w="1/4">w=1/4</DemoBox>
        <DemoBox w="3/4">w=3/4</DemoBox>
      </Group>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}
Last updated on
SizeFont Family