Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Radius Property

Controls the border-radius of elements. Supports scaled values, custom values, responsive breakpoints, inheritance, and individual corner control.

Medium Radius

import { Box, Text } from "@locus-ui/components";
<Box p="2" radius="md" className="border">  <Text>Medium Radius</Text></Box>

View Source

Examples

All Radii / Roundness

The radius prop accepts values none, xs, sm, md, lg, xl, and full. Combined with the roundness multiplier (1–6), this creates a full matrix of border-radius options.

none, 1

xs, 1

sm, 1

md, 1

lg, 1

xl, 1

full, 1

none, 2

xs, 2

sm, 2

md, 2

lg, 2

xl, 2

full, 2

none, 3

xs, 3

sm, 3

md, 3

lg, 3

xl, 3

full, 3

none, 4

xs, 4

sm, 4

md, 4

lg, 4

xl, 4

full, 4

none, 5

xs, 5

sm, 5

md, 5

lg, 5

xl, 5

full, 5

none, 6

xs, 6

sm, 6

md, 6

lg, 6

xl, 6

full, 6

all-radii.tsx

import { Box, Text } from "@locus-ui/components";
const numbers = ["1", "2", "3", "4", "5", "6"];const radii = ["none", "xs", "sm", "md", "lg", "xl", "full"];
return numbers.map((number) => (  <Box key={number} className="flex gap-2">    {radii.map((radius) => (      <Box p="2" key={radius} radius={radius} roundness={number} className="border">        <Text>{radius}, {number}</Text>      </Box>    ))}

Inheritance

Radius values can be inherited from parent elements using radius="inherit", or fall back to the theme default.

No Radius

XL Radius

Default/Theme

Inherit

Default/Theme

This box has a custom radius (9px)

Inherit

Default/Theme

inheritance.tsx

import { Box, Text } from "@locus-ui/components";
<Box radius="none" p="2" className="border">  <Text>No Radius</Text>  <Box radius="xl" p="2" className="border">    <Text>XL Radius</Text>    <Box p="2" className="border">      <Text>Default/Theme</Text>    </Box>  </Box>

Responsive

Radius supports responsive values using breakpoint objects.

This box has breakpoint-specific radii (xs initial, xl on sm, full on md)

responsive.tsx

import { Box, Text } from "@locus-ui/components";
<Box p="2" my="4" radius={{ initial: "xs", sm: "xl", md: "full" }} className="border">  <Text>This box has breakpoint-specific radii (xs initial, xl on sm, full on md)</Text></Box>

Side Radii

Use radius-t, radius-r, radius-b, and radius-l to set radius on specific sides.

XL top radius only

XL left radius only

XL bottom radius only

XL right radius only

side-radii.tsx

import { Box, Text } from "@locus-ui/components";
<Box p="2" radius-t="xl" radius="none" className="border">  <Text>XL top radius only</Text></Box>
<Box p="2" radius-l="xl" radius="none" className="border">  <Text>XL left radius only</Text></Box>
<Box p="2" radius-b="xl" radius="none" className="border">  <Text>XL bottom radius only</Text>

Individual Corner Radii

Use radius-tl, radius-tr, radius-br, and radius-bl to set radius on individual corners.

XL top-left radius only

XL top-right radius only

XL bottom-right radius only

XL bottom-left radius only

individual-corners.tsx

import { Box, Text } from "@locus-ui/components";
<Box p="2" radius-tl="xl" radius="none" className="border">  <Text>XL top-left radius only</Text></Box>
<Box p="2" radius-tr="xl" radius="none" className="border">  <Text>XL top-right radius only</Text></Box>
<Box p="2" radius-br="xl" radius="none" className="border">  <Text>XL bottom-right radius only</Text>