Documentation for the styling system in Chakra UI v3.
# Animation Styles
## Overview
Animation styles allow you to define reusable animation properties. The goal is
to reduce the amount of code needed to animate components.
The supported animation styles are:
- **Animation**: animation composition, delay, direction, duration, fill mode,
iteration count, name, play state, timing function
- **Animation range**: animation range, start, end, timeline
- **Transform origin**: transform origin
## Defining animation styles
Animation styles are defined using the `defineAnimationStyles` function.
Here's an example of an animation style:
```js
import { defineAnimationStyles } from "@chakra-ui/react"
const animationStyles = defineAnimationStyles({
bounceFadeIn: {
value: {
animationName: "bounce, fade-in",
animationDuration: "1s",
animationTimingFunction: "ease-in-out",
animationIterationCount: "infinite",
},
},
})
```
## Built-in animation styles
Chakra UI provides a set of built-in animation styles that you can use.
## Update the theme
To use the animation styles, update the `theme` object with the
`animationStyles` property.
```js filename="theme.ts"
import { createSystem, defineConfig } from "@chakra-ui/react"
import { animationStyles } from "./animation-styles"
const config = defineConfig({
theme: {
animationStyles,
},
})
export default createSystem(defaultConfig, config)
```
After updating the theme, run this command to generate the animations.
```bash
npx @chakra-ui/cli typegen ./theme.ts
```
These animation styles can be composed with other styles like `_open` and
`_closed` which map to the `data-state=open|closed` attribute.
```jsx
This content will fade in
```
# Cascade Layers
Chakra UI relies on CSS cascade layers to provide a predictable, performant way
to override components. The layers are defined to match that of
[Panda CSS](https://panda-css.com).
> **Good to know**: This plays a major role in the faster reconciliation times
> in v3.x
## Layer Types
Chakra supports these cascade layer types:
- `@layer reset`: Where the preflight or css resets styles are defined.
- `@layer base`: Where global styles are placed when defined in `globalCss`
config property.
- `@layer recipes`: Where styles for recipes are placed when defined in
`theme.recipes` or `theme.slotRecipes`
- `@layer tokens`: Where styles for design tokens are placed when defined in
`theme.tokens` or `theme.semanticTokens`
## Layer Order
Chakra appends the following layers to the top of the generated emotion
stylesheet:
```css
@layer reset, base, tokens, recipes;
```
This structure allows for smoother experience when combining Chakra and Panda
CSS in the same project.
## Disabling Layers
Cascade layers are enabled by default. If you want to disable them, you can do
so by setting the `disableLayers` option to `true`
```js title="theme.ts"
export const system = createSystem(defaultConfig, {
disableLayers: true,
})
```
Next, edit the `components/ui/provider` file to use the new system
```tsx title="provider.tsx" {3} /value={system}/
import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"
import { system } from "./theme"
export function Provider(props: React.PropsWithChildren) {
return (
{props.children}
)
}
```
# Chakra Factory
## Overview
Chakra factory serves as a way to create supercharged JSX component from any
HTML element to enable them receive JSX style props.
```js
import { chakra } from "@chakra-ui/react"
```
The chakra factory can be used in two ways: as a JSX element or as a factory
function.
## JSX Element
Style props are CSS properties that you can pass as props to your components.
With the JSX factory, you can use `chakra.` syntax to create JSX
elements that support style props.
```jsx
import { chakra } from "@chakra-ui/react"
const Button = ({ children }) => (
{children}
)
```
## Factory function
Use the `chakra` function to convert native elements or custom components. The
key requirement is that the component **must** accept `className` as props.
```jsx
const Link = chakra("a")
function Example() {
return
}
```
Another example with a custom component.
```jsx
import * as RadixScrollArea from "@radix-ui/react-scroll-area"
const ScrollArea = chakra(RadixScrollArea.Root)
function Example() {
return (
Hello
)
}
```
### Attaching styles
Use the `chakra` function to attach styles or recipes to components.
```jsx
const Link = chakra("a", {
base: {
bg: "papayawhip",
color: "red.500",
},
})
// usage:
```
### Attaching recipes
Here's an example of attaching a recipe to the component.
```jsx
const Card = chakra("div", {
base: {
shadow: "lg",
rounded: "lg",
bg: "white",
},
variants: {
variant: {
outline: {
border: "1px solid",
borderColor: "red.500",
},
solid: {
bg: "red.500",
color: "white",
},
},
},
})
// usage:
```
### Forwarding props
By default, the `chakra` factory only filters chakra related style props from
getting to the DOM. For more fine-grained control of how props are forwarded,
pass the `shouldForwardProp` option.
Here's an example that forwards all props that doesn't start with `$`
```tsx
function shouldForwardProp(prop: string) {
return !prop.startsWith("$")
}
const Component = chakra("div", {}, { shouldForwardProp })
```
To create custom forward props logic, combine the
[@emotion/is-prop-valid](https://github.com/emotion-js/emotion/tree/master/packages/is-prop-valid)
package and the `isValidProperty` from Chakra UI.
```tsx
import { chakra, defaultSystem } from "@chakra-ui/react"
import shouldForwardProp from "@emotion/is-prop-valid"
const { isValidProperty } = defaultSystem
function shouldForwardProp(prop: string, variantKeys: string[]) {
const chakraSfp = !variantKeys?.includes(prop) && !isValidProperty(prop)
return shouldForwardProp(prop) && chakraSfp
}
const Component = chakra("div", {}, { shouldForwardProp })
```
## Default Props
Use the `defaultProps` option to pass default props to the component.
```jsx {9}
const Button = chakra(
"button",
{
base: {
bg: "blue.500",
color: "white",
},
},
{ defaultProps: { type: "button" } },
)
```
## Polymorphism
Every component created with the chakra factory can accept the `as` and
`asChild` props to change the underlying DOM element.
```tsx
```
or
```tsx
```
> Learn more about composition in Chakra UI
> [here](/docs/components/concepts/composition)
# Color opacity modifier
Every color related style property can use the
[`color-mix`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)
shortcut to apply opacity to a color.
## Syntax
The general syntax is `{color}/{opacity}`. For example: `bg="red.300/40"`.
## Usage
```tsx
Hello World
```
This will generate something like this:
```css {2,3}
.css-sxdf {
--mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
background: var(--mix-background, var(--colors-red-300));
color: var(--colors-white);
}
```
### CSS Variables
This feature can be used in css variables as well. This is useful for creating
one-off color token in a component.
The token reference syntax `{}` is required for this to work.
```tsx
Hello World
```
# Conditional Styles
## Overview
Chakra allows you to write styles for pseudo states, media queries, and custom
data attributes with the conditional style props.
:::note
See the list of [built-in conditions](#reference) below.
:::
## Usage
For example, here's how to change the background color of a button when it's
hovered:
```jsx
Hover me
```
### Nested condition
Conditional values can be nested to create complex selector rules.
Here's how to change the background color of an element when in focus on hover:
```jsx
Hover & Focus me
```
### At Rules
This also works with the supported at-rules (`@media`, `@layer`, `@container`,
`@supports`, and `@page`):
```tsx
Hello
```
## Pseudo Classes
### Hover, Active, Focus, and Disabled
Here's an example of how to style the hover, active, focus, and disabled states
of an element
```jsx
Hover me > Hover me
```
### First, Last, Odd, Even
Here's an example of how to style the first, last, odd, and even elements in a
list
```jsx
{items.map((item) => (
{item}
))}
```
You can also style even and odd elements using the `_even` and `_odd` modifier
```jsx
{items.map((item) => (
{item}
))}
```
## Pseudo Elements
### Before and After
To style the `::before` and `::after` pseudo elements of an element, use the
`_before` and `_after` modifiers
```jsx /_before/
Hello
```
### Placeholder
To style the placeholder text of any input or textarea, use the `_placeholder`
modifier:
```jsx {3}
```
### File Inputs
To style the file input button, use the `_file` modifier:
```jsx {3}
```
## Media Queries
### Reduced Motion
Use the `_motionReduce` and `_motionSafe` modifiers to style an element based on
the user's motion preference:
```jsx
Hello
```
### Color Scheme
The `prefers-color-scheme` media feature is used to detect if the user has
requested the system to use a light or dark color theme.
Use the `_osLight` and `_osDark` modifiers to style an element based on the
user's color scheme preference:
```jsx
Hello
```
### Color Contrast
The `prefers-contrast` media feature is used to detect if the user has requested
the system use a high or low contrast theme.
Use the `_highContrast` and `_lessContrast` modifiers to style an element based
on the user's color contrast preference:
```jsx
Hello
```
### Orientation
The `orientation` media feature is used to detect if the user has a device in
portrait or landscape mode.
Use the `_portrait` and `_landscape` modifiers to style an element based on the
user's device orientation:
```jsx
Hello
```
## Selectors
### Arbitrary selectors
For arbitrary, use the `css` prop to write styles for one-off selectors:
```tsx
```
Here's another example that targets the child elements of a parent element:
```tsx
*": { margin: "2" },
}}
/>
```
### Group Selectors
To style an element based on its parent element's state or attribute, add the
`group` class to the parent element, and use any of the `_group*` modifiers on
the child element.
```jsx
Hover me
```
This modifier works for every pseudo class modifiers like `_groupHover`,
`_groupActive`, `_groupFocus`, and `_groupDisabled`, etc.
### Sibling Selectors
To style an element based on its sibling element's state or attribute, add the
`peer` class to the sibling element, and use any of the `_peer*` modifiers on
the target element.
```jsx /_peerHover={{ bg: "red.500" }}/
Hover me
I'll change by bg
```
> **Note:** This only works for when the element marked with `peer` is a
> previous siblings, that is, it comes before the element you want to start.
## Data Attribute
### LTR and RTL
To style an element based on the direction of the text, use the `_ltr` and
`_rtl` modifiers
```jsx {2}
Hello
```
### State
To style an element based on its `data-{state}` attribute, use the corresponding
`_{state}` modifier
```jsx /_loading/
Hello
```
This works for common states like `data-active`, `data-disabled`, `data-focus`,
`data-hover`, `data-invalid`, `data-required`, and `data-valid`.
```jsx /_active/
Hello
```
### Orientation
To style an element based on its `data-orientation` attribute, use the
`_horizontal` and `_vertical` modifiers
```jsx
Hello
```
## ARIA Attribute
To style an element based on its `aria-{state}=true` attribute, use the
corresponding `_{state}` prop
```jsx
Hello
```
## Reference
Here's a list of all the condition props you can use in Chakra:
## Customization
Chakra lets you create your own conditions, so you're not limited to the ones in
the default preset. Learn more about customizing conditions
[here](/docs/theming/customization/conditions).
# CSS Variables
## Overview
CSS variables have become the defacto way to create shared values on the web.
It's very useful to avoid prop interpolations, classname regeneration, and
reduce runtime evaluation of token values.
## Examples
### Basic
Use the `css` prop to create css variables
```jsx
Hello
Hello
```
### Access tokens
Use the full token path to access tokens
```jsx
Hello
```
Here's an example of how to access size tokens
```jsx
Hello
```
### Responsive Styles
Use the responsive syntax to make css variables responsive
```jsx
Hello
Hello
```
### Color Opacity Modifier
When accessing color tokens, you can use the opacity modifier to access the
color with an opacity. The requirement is to use the `{}` syntax.
```jsx
Hello
```
### Virtual Color
Variables can point to a virtual color via the `colors.colorPalette.*` value.
This is useful for creating theme components.
```jsx
Hello
```
# Dark Mode
Chakra relies on the `next-themes` library to provide dark mode support. During
the installation process, the snippets required to get started are added to your
project via the CLI.
## Setup
If you haven't already, you can add the `next-themes` library to your project
via the CLI.
```bash
npx @chakra-ui/cli snippet add color-mode
```
The generated snippets consists of the following:
- `ColorModeProvider`: composes the `next-themes` provider component
- `useColorMode`: provides the current color mode and a function to toggle the
color mode
- `useColorModeValue`: returns the correct value based on the current color mode
- `ColorModeButton`: can be used to toggle the color mode
## Usage
Wrap your app with the `ColorModeProvider` and use the `useColorMode` hook to
access and toggle the color mode.
```tsx
import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
export default function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
### Adding the dark mode toggle
Use the `ColorModeButton` component to toggle the color mode.
```tsx
import { ColorModeButton } from "@/components/ui/color-mode"
export default function Page({ children }: { children: React.ReactNode }) {
return (
<>
{children}
)
}
```
### Styling dark mode
Use the `_dark` condition to style components for dark mode.
```tsx
Hello
```
or
```tsx
Hello
```
## Using semantic tokens
To reduce the amount of code you need to write, use semantic tokens to style
components for dark mode. This ensures the light and dark mode styles are
applied automatically and consistently.
Chakra provides a set of semantic tokens that you can use to style components
for dark mode. Learn more about
[semantic tokens](/docs/theming/semantic-tokens).
```tsx
Hello
```
## Forcing dark mode
### Element specific dark mode
To force dark mode, set the `dark` className on any parent element, or the root
element of your application.
```tsx /className="dark"/
Hello
```
The same applied to forcing light mode, use the `light` className.
```tsx /className="light"/
Hello
```
### Page specific dark mode
Use the `ColorModeProvider` component to set the dark mode for a page.
```tsx
Hello
```
> Follow this `next-themes` guide to learn more about
> [forcing color mode](https://github.com/pacocoursey/next-themes#force-page-to-a-theme).
# Focus Ring
The focus ring is used to identify the currently focused element on your page.
While this is important for accessibility, styling every component to have a
focus ring can be tedious.
Chakra UI provides the `focusRing` and `focusVisibleRing` style props to style
focus ring with ease. The value of the `focusRing` prop can be "outside",
"inside", or "mixed".
## Focus Ring
This focus ring maps to the `&:is(:focus, [data-focus])` CSS selector.
Here's how to style a button from scratch with a focus ring:
```tsx
Click me
```
## Focus Visible Ring
This focus ring maps to the `&:is(:focus-visible, [data-focus-visible])` CSS
selector.
```tsx
Click me
```
### Difference between Focus Ring and Focus Visible Ring
The Focus Visible Ring functions similarly to the Focus Ring, but with a key
difference: it only applies focus indicator styles when an element receives
keyboard focus.
This ensures that the focus ring is visible only when navigating via keyboard,
improving accessibility without affecting mouse interactions.
## Built-in Focus Ring
Here's a preview of the supported focus ring.
```tsx
import { Center, For, Stack } from "@chakra-ui/react"
export const TokensFocusRing = () => {
return (
{(focusRing) => (
{focusRing}
)}
)
}
```
## Customization
### Ring Color
To change the focus ring color for a specific component, you can use the
`focusRingColor` prop.
```tsx
```
To change the color of the focus ring globally, you can configure the
`focusRing` semantic token.
```tsx {2-4}
const colors = defineSemanticTokens.colors({
focusRing: {
value: { base: "{colors.red.500}", _dark: "{colors.red.500}" },
},
})
```
### Ring Width
To change the focus ring width for a specific component, you can use the
`focusRingWidth` prop.
```tsx
```
### Ring Style
To change the focus ring style for a specific component, you can use the
`focusRingStyle` prop.
```tsx
```
# Layer Styles
## Overview
Layer styles allows you to define visual properties. The common properties are:
- Color or text color
- Background color
- Border width and border color
- Box shadow
- Opacity
## Defining layer styles
Layer styles are defined using the `defineLayerStyles` function.
```js title="layer-styles.ts"
import { defineLayerStyles } from "@chakra-ui/react"
const layerStyles = defineLayerStyles({
container: {
description: "container styles",
value: {
background: "gray.50",
border: "2px solid",
borderColor: "gray.500",
},
},
})
```
## Built-in layer styles
Chakra UI provides a set of built-in layer styles.
## Updating the theme
To use the layer styles, update the `theme` object with the `layerStyles`
property.
```js title="theme.ts"
import { createSystem, defineConfig } from "@chakra-ui/react"
import { layerStyles } from "./layer-styles"
const config = defineConfig({
theme: {
layerStyles,
},
})
export default createSystem(defaultConfig, config)
```
After updating the theme, run this command to generate the typings.
```bash
npx @chakra-ui/cli typegen
```
## Using layer styles
Now you can use `layerStyle` property in your components.
```jsx
This is inside a container style
```
# Styling
## Concepts
After installing Chakra UI, follow these guidelines to learn the key concepts:
- [Chakra Factory](/docs/styling/chakra-factory)
- [Responsive Design](/docs/styling/responsive-design)
- [CSS Variables](/docs/styling/css-variables)
- [Dark Mode](/docs/styling/dark-mode)
- [Color Opacity Modifier](/docs/styling/color-opacity-modifier)
- [Conditional Styles](/docs/styling/conditional-styles)
- [Virtual Color](/docs/styling/virtual-color)
## Compositions
After understanding the concepts, learn how to use these compositions to avoid
repeating styles:
- [Text Styles](/docs/styling/text-styles)
- [Layer Styles](/docs/styling/layer-styles)
- [Animation Styles](/docs/styling/animation-styles)
- [Focus Ring](/docs/styling/focus-ring)
## Style Props
Style props are the most fundamental way to style your components in Chakra UI.
They are basically css styles as props.
[Learn more about style props](/docs/styling/style-props/background)
# Responsive Design
## Overview
Responsive design is a fundamental aspect of modern web development, allowing
websites and applications to adapt seamlessly to different screen sizes and
devices.
:::info
Chakra uses a mobile-first breakpoint system and leverages min-width media
queries `@media(min-width)` when you write responsive styles.
:::
Chakra provides five breakpoints by default:
```ts
const breakpoints = {
base: "0em", // 0px
sm: "30em", // ~480px
md: "48em", // ~768px
lg: "62em", // ~992px
xl: "80em", // ~1280px
"2xl": "96em", // ~1536px
}
```
## Object syntax
Here's an example of how to change the font weight of a text on large screens
```jsx
Text
```
or use the prop based modifier
```jsx
Text
```
## Array syntax
Chakra also accepts arrays as values for responsive styles. Pass the
corresponding value for each breakpoint in the array. Using our previous code as
an example:
```jsx
Text
```
Notice the use of `undefined` for the breakpoints to skip the `md` and `lg`
breakpoints.
## Breakpoint targeting
### Breakpoint range
Chakra provides a way to target a range of breakpoints using the `To` notation.
To apply styles between the `md` and `xl` breakpoints, use the `mdToXl`
property:
```jsx
Text
```
> This text will only be bold from `md` to `xl` breakpoints.
### Only breakpoint
To target a single breakpoint, use the `Only` notation. Here's an example of how
to apply styles only in the `lg` breakpoint, using the `lgOnly` property:
```jsx
Text
```
## Hiding elements at breakpoint
Chakra provides the `hideFrom` and `hideBelow` utilities to hide elements at
specific breakpoints.
To hide an element from the `md` breakpoint, use the `hideFrom` utility:
```jsx
This text will be hidden from the `md` breakpoint
```
To hide an element below the `md` breakpoint, use the `hideBelow` utility:
```jsx
This text will be hidden below the `md` breakpoint
```
## Customizing Breakpoints
To learn how to customize breakpoints, please refer to the
[customizing breakpoints](/docs/theming/customization/breakpoints) section.
## FAQs
### Why are breakpoints converted to `rem`?
The conversion to `rem` is intentional and beneficial for accessibility reasons:
- User Changed Their Browser's Font Setting
- User Zooms In
- Font size Changed in HTML
> Learn more here: https://zellwk.com/blog/media-query-units/
# Text Styles
## Overview
Text styles allows you to define textual css properties. The common properties
are:
- **Font**: font family, weight, size
- **Line height**
- **Letter spacing**
- **Text decoration**
- **Text transform**
## Defining text styles
Text styles are defined using the `defineTextStyles` function.
```js filename="text-styles.ts"
import { defineTextStyles } from "@chakra-ui/react"
export const textStyles = defineTextStyles({
body: {
description: "The body text style - used in paragraphs",
value: {
fontFamily: "Inter",
fontWeight: "500",
fontSize: "16px",
lineHeight: "24",
letterSpacing: "0",
textDecoration: "None",
textTransform: "None",
},
},
})
```
## Built-in text styles
Chakra UI provides a set of built-in text styles.
## Update the theme
To use the text styles, update the `theme` object with the `textStyles`
property.
```js filename="theme.ts"
import { createSystem, defineConfig } from "@chakra-ui/react"
import { textStyles } from "./text-styles"
const config = defineConfig({
theme: {
textStyles,
},
})
export default createSystem(defaultConfig, config)
```
After updating the theme, run this command to generate the typings.
```bash
npx @chakra-ui/cli typegen
```
## Using text styles
Now you can use `textStyle` property in your components.
```jsx
This is the body text style
```
# Virtual Color
## Overview
Chakra allows you to create a virtual color or color placeholder in your
project. The `colorPalette` property is how you create virtual color.
```js
Hello World
```
This will translate to the `blue.100` background color and `blue.200` background
color on hover.
## Usage
The fundamental requirement for virtual colors is that your colors must have a
consistent naming convention. By default, Chakra use `50-950` color values for
each color we provide.
This makes it easier for you to create and use virtual colors. Let's say we need
to create a themable outline button from scratch.
```jsx
Click me
```
### Recipes
Virtual colors are most useful when used with recipes.
```js
const buttonRecipe = defineRecipe({
base: {
display: "flex",
alignItems: "center",
justifyContent: "center",
// set the color palette
colorPalette: "blue",
},
variants: {
variant: {
primary: {
bg: "colorPalette.500",
color: "white",
},
outline: {
borderWidth: "1px",
borderColor: "colorPalette.500",
_hover: {
borderColor: "colorPalette.600",
},
},
},
},
})
```
### Components
Most built-in components in Chakra support virtual colors.
```jsx
```
### Dark mode
Another amazing thing you can do with virtual colors is to use them with dark
mode.
```jsx
Hello World
```
> This element will have a `blue.600` background color in light mode and a
> `blue.400` background color in dark mode.
# Background
## Background Attachment
Use `bgAttachment` to control the attachment of a background image.
```jsx
```
| Prop | CSS Property | Token Category |
| -------------------------------------- | ----------------------- | -------------- |
| `bgAttachment`, `backgroundAttachment` | `background-attachment` | - |
## Background Blend Mode
Use `bgBlendMode` prop to control how an element's background image should blend
with the its background color.
```jsx
```
## Background Clip
Use `bgClip` to control the clipping of a background image.
```jsx
```
| Prop | CSS Property | Token Category |
| -------------------------- | ----------------- | -------------- |
| `bgClip`, `backgroundClip` | `background-clip` | - |
## Background Color
Use `bg`, `bgColor`, or `backgroundColor` props to set the background color of
an element.
```jsx
// with opacity modifier
```
| Prop | CSS Property | Token Category |
| ---------------------------- | ------------------ | -------------- |
| `bg`, `background` | `background` | `colors` |
| `bgColor`, `backgroundColor` | `background-color` | `colors` |
## Background Origin
Use `bgOrigin` or `backgroundOrigin` to control the origin of a background
image.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------------------ | ------------------- | -------------- |
| `bgOrigin`, `backgroundOrigin` | `background-origin` | - |
## Background Position
Properties for controlling the src and position of a background image.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------------------------ | ------------------ | -------------- |
| `bgPosition`, `backgroundPosition` | `background-image` | - |
| `bgPositionX`, `backgroundPositionX` | `background-image` | - |
| `bgPositionY`, `backgroundPositionY` | `background-image` | - |
## Background Repeat
Use `bgRepeat` or `backgroundRepeat` to control the repeat of a background
image.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------------------ | ------------------- | -------------- |
| `bgRepeat`, `backgroundRepeat` | `background-repeat` | - |
## Background Size
Use `bgSize` or `backgroundSize` to control the size of a background image.
```jsx
```
| Prop | CSS Property | Token Category |
| -------------------------- | ----------------- | -------------- |
| `bgSize`, `backgroundSize` | `background-size` | - |
## Background Image
Use `bgImage` or `backgroundImage` to set the background image of an element.
```jsx
// with token reference
```
| Prop | CSS Property | Token Category |
| ---------------------------- | ------------------ | --------------------- |
| `bgImage`, `backgroundImage` | `background-image` | `assets`, `gradients` |
## Background Gradient
Properties to create a background gradient based on color stops.
```jsx
```
| Prop | CSS Property | Token Category |
| -------------- | ------------------ | -------------- |
| `bgGradient` | `background-image` | `gradients` |
| `textGradient` | `background-image` | `gradients` |
| `gradientFrom` | `--gradient-from` | `colors` |
| `gradientTo` | `--gradient-to` | `colors` |
| `gradientVia` | `--gradient-via` | `colors` |
# Border
## Border Radius
### All sides
Use the `rounded` or `borderRadius` props to apply border radius on all sides of
an element.
```jsx
// shorthand
```
| Prop | CSS Property | Token Category |
| ------------------------- | --------------- | -------------- |
| `rounded`, `borderRadius` | `border-radius` | `radii` |
### Specific sides
Use the `rounded{Left,Right,Top,Bottom}` or
`border{Left,Right,Top,Bottom}Radius` prop, to apply border radius on a specific
side of an element.
```jsx
// shorthand
// shorthand
```
Use the logical equivalent to make the border radius adapt based on the text
direction.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------------------------- | ------------------------------------------------------ | -------------- |
| `roundedLeft`, `borderLeftRadius` | `border-left-radius` | `radii` |
| `roundedRight`, `borderRightRadius` | `border-right-radius` | `radii` |
| `roundedTop`, `borderTopRadius` | `border-top-radius` | `radii` |
| `roundedBottom`, `borderBottomRadius` | `border-bottom-radius` | `radii` |
| `roundedStart`, `borderStartRadius` | `border-start-start-radius`, `border-end-start-radius` | `radii` |
| `roundedEnd`, `borderEndRadius` | `border-start-end-radius`, `border-end-end-radius` | `radii` |
### Specific corners
Use the `border{Top,Bottom}{Left,Right}Radius` properties, or the shorthand
equivalent to round a specific corner.
```jsx
// shorthand
```
Use the logical properties to adapt based on the text direction.
```jsx
// shorthand
```
| Prop | CSS Property | Token Category |
| ---------------------------------------- | ---------------------------- | -------------- |
| `roundedTopLeft`,`borderTopLeftRadius` | `border-top-left-radius` | `radii` |
| `roundedTopRight`,`borderTopRight` | `border-top-right-radius` | `radii` |
| `roundedBottomRight`,`borderBottomRight` | `border-bottom-right-radius` | `radii` |
| `roundedBottomLeft`,`borderBottomLeft` | `border-bottom-left-radius` | `radii` |
## Border Width
### All sides
Use the `borderWidth` prop to apply border width on all sides of an element.
> Chakra applies `borderStyle: solid` and a global border color by default.
> Specifying a border width is sufficient to apply the border.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `borderWidth` | `border-width` | `borderWidths` |
### Specific sides
Use the `border{Left|Right|Top|Bottom}Width` prop to apply border width on a
specific side of an element.
```jsx
```
Use the logical equivalent to make the border width adapt based on the text
direction.
```jsx
// shorthand
```
| Prop | CSS Property | Token Category |
| --------------------------------------------- | --------------------------- | -------------- |
| `borderTopWidth` | `border-top-width` | `borderWidths` |
| `borderLeftWidth` | `border-left-width` | `borderWidths` |
| `borderRightWidth` | `border-right-width` | `borderWidths` |
| `borderBottomWidth` | `border-bottom-width` | `borderWidths` |
| `borderStartWidth` , `borderInlineStartWidth` | `border-{start+end}-width` |
| `borderEndWidth` , `borderInlineEndWidth` | `border-{start+end}-width` |
| `borderXWidth` , `borderInlineWidth` | `border-{left,right}-width` | `borderWidths` |
| `borderYWidth` , `borderBlockWidth` | `border-{top,bottom}-width` | `borderWidths` |
## Border Color
### All sides
Use the `borderColor` prop to apply border color on all sides of an element.
```jsx
// with opacity modifier
```
### Specific sides
Use the `border{Left,Right,Top,Bottom}Color` prop to apply border color on a
specific side of an element.
```jsx
```
Use the logical properties to adapt based on the text direction.
```jsx
```
| Prop | CSS Property | Token Category |
| --------------------------------------------- | -------------------------- | -------------- |
| `borderColor` | `border-color` | `colors` |
| `borderTopColor` | `border-top-color` | `colors` |
| `borderLeftColor` | `border-left-color` | `colors` |
| `borderRightColor` | `border-right-color` | `colors` |
| `borderBottomColor` | `border-bottom-color` | `colors` |
| `borderStartColor` , `borderInlineStartColor` | `border-{start,end}-color` | `colors` |
| `borderEndColor` , `borderInlineEndColor` | `border-{start,end}-color` | `colors` |
| `borderXColor`, `borderInlineColor` | `border-inline-color` | `colors` |
| `borderYColor`, `borderBlockColor` | `border-block-color` | `colors` |
## Divide Width
Use the `divide{X,Y}Width` prop to apply border width between elements. It uses
the CSS selector `> * + *` to apply the `border*` properties.
```jsx
1212
```
| Prop | CSS Property | Token Category |
| ------------- | ----------------------------------- | -------------- |
| `divideWidth` | `border-{inline,block}-start-width` | `borderWidths` |
## Divide Color
Use the `divideColor` prop to apply border color between elements.
```jsx
12
```
| Prop | CSS Property | Token Category |
| ------------- | ---------------- | -------------- |
| `divideColor` | `--divide-color` | `colors` |
## Divide Style
Use the `divideStyle` prop to apply border style between elements.
```jsx
12
```
| Prop | CSS Property | Token Category |
| ------------- | ---------------- | -------------- |
| `divideStyle` | `--divide-style` | `borderStyle` |
# Display
## Display Property
```jsx
// responsive
```
| Prop | CSS Property | Token Category |
| --------- | ------------ | -------------- |
| `display` | `display` | - |
## Hiding Elements
### Hide From
Use the `hideFrom` prop to hide an element from a specific breakpoint.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `hideFrom` | `display` | `breakpoints` |
### Hide Below
Use the `hideBelow` prop to hide an element below a specific breakpoint.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `hideBelow` | `display` | `breakpoints` |
# Divide
## Divide X
Use the `divideX` prop to add a divider between elements horizontally.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| --------- | --------------------------- | -------------- |
| `divideX` | `border-inline-start-width` | - |
## Divide Y
Use the `divideY` prop to add a divider between elements vertically.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| --------- | ------------------ | -------------- |
| `divideY` | `border-top-width` | - |
## Divide Color
Use the `divideColor` prop to add a divider color.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| ------------- | ------------------ | -------------- |
| `divideColor` | `border-top-color` | - |
## Divide Style
Use the `divideStyle` prop to add a divider style.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `divideStyle` | `border-style` | - |
# Effects
## Box Shadow
Use the `shadow` or `boxShadow` prop to apply a box shadow to an element.
```jsx
// hardcoded values
// token values
```
| Prop | CSS Property | Token Category |
| ---------------------- | ---------------- | -------------- |
| `shadows`, `boxShadow` | `box-shadow` | `shadows` |
| `shadowColor` | `--shadow-color` | `colors` |
## Box Shadow Color
Use the `shadowColor` prop to set the color of a box shadow. This prop maps to
the `--shadow-color` CSS variable.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------- | ---------------- | -------------- |
| `shadowColor` | `--shadow-color` | `colors` |
## Opacity
Use the `opacity` prop to set the opacity of an element.
```jsx
```
| Prop | CSS Property | Token Category |
| --------- | ------------ | -------------- |
| `opacity` | `opacity` | `opacity` |
## Mix Blend Mode
Use the `mixBlendMode` prop to control how an element's content should be
blended with the background.
```jsx
```
| Prop | CSS Property | Token Category |
| -------------- | ---------------- | -------------- |
| `mixBlendMode` | `mix-blend-mode` | - |
# Filters
## Filter
Use the `filter` prop to apply visual effects like blur or color shift to an
element.
```jsx
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `filter` | `filter` | - |
## Blur
Use the `blur` prop to apply a blur effect to an element. The requirement for
this prop is to set the `filter` prop to `auto`.
```jsx
// hardcoded value
// token value
```
| Prop | CSS Property | Token Category |
| ------ | ------------ | -------------- |
| `blur` | `--blur` | `blurs` |
## Contrast
Use the `contrast` prop to apply a contrast effect to an element. The
requirement for this prop is to use the `filter` prop and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `contrast` | `--contrast` | - |
## Drop Shadow
Use the `dropShadow` prop to apply a drop shadow effect to an element. The
requirement for this prop is to use the `filter` prop and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------ | --------------- | -------------- |
| `dropShadow` | `--drop-shadow` | - |
## Grayscale
Use the `grayscale` prop to apply a grayscale effect to an element. The
requirement for this prop is to use the `filter` prop and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------- | ------------- | -------------- |
| `grayscale` | `--grayscale` | - |
## Hue Rotate
Use the `hueRotate` prop to apply a hue rotate effect to an element. The
requirement for this prop is to use the `filter` prop and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------- | -------------- | -------------- |
| `hueRotate` | `--hue-rotate` | - |
## Invert
Use the `invert` prop to apply an invert effect to an element. The requirement
for this prop is to use the `filter` prop and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `invert` | `--invert` | - |
## Saturate
Use the `saturate` prop to apply a saturate effect to an element. The
requirement for this prop is to use the `filter` prop and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `saturate` | `--saturate` | - |
## Sepia
Use the `sepia` prop to apply a sepia effect to an element. The requirement for
this prop is to use the `filter` prop and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ------- | ------------ | -------------- |
| `sepia` | `--sepia` | - |
## Backdrop Filter
Use the `backdropFilter` prop to apply visual effects like blur or color shift
to the area behind an element. This creates a translucent effect.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------------- | ----------------- | -------------- |
| `backdropFilter` | `backdrop-filter` | - |
## Backdrop Blur
Use the `backdropBlur` prop to apply a blur effect to the area behind an
element. The requirement for this prop is to set the `backdropFilter` prop to
`auto`.
```jsx
// hardcoded value
// token value
```
| Prop | CSS Property | Token Category |
| -------------- | ----------------- | -------------- |
| `backdropBlur` | `--backdrop-blur` | `blurs` |
## Backdrop Contrast
Use the `backdropContrast` prop to apply a contrast effect to the area behind an
element. The requirement for this prop is to use the `backdropFilter` prop and
set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------ | --------------------- | -------------- |
| `backdropContrast` | `--backdrop-contrast` | - |
## Backdrop Grayscale
Use the `backdropGrayscale` prop to apply a grayscale effect to the area behind
an element. The requirement for this prop is to use the `backdropFilter` prop
and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------- | ---------------------- | -------------- |
| `backdropGrayscale` | `--backdrop-grayscale` | - |
## Backdrop Hue Rotate
Use the `backdropHueRotate` prop to apply a hue rotate effect to the area behind
an element. The requirement for this prop is to use the `backdropFilter` prop
and set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------- | ----------------------- | -------------- |
| `backdropHueRotate` | `--backdrop-hue-rotate` | - |
## Backdrop Invert
Use the `backdropInvert` prop to apply an invert effect to the area behind an
element. The requirement for this prop is to use the `backdropFilter` prop and
set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------------- | ------------------- | -------------- |
| `backdropInvert` | `--backdrop-invert` | - |
## Backdrop Opacity
Use the `backdropOpacity` prop to apply an opacity effect to the area behind an
element. The requirement for this prop is to use the `backdropFilter` prop and
set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------------- | -------------------- | -------------- |
| `backdropOpacity` | `--backdrop-opacity` | - |
## Backdrop Saturate
Use the `backdropSaturate` prop to apply a saturate effect to the area behind an
element. The requirement for this prop is to use the `backdropFilter` prop and
set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------ | --------------------- | -------------- |
| `backdropSaturate` | `--backdrop-saturate` | - |
## Backdrop Sepia
Use the `backdropSepia` prop to apply a sepia effect to the area behind an
element. The requirement for this prop is to use the `backdropFilter` prop and
set it to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| --------------- | ------------------ | -------------- |
| `backdropSepia` | `--backdrop-sepia` | - |
# Flex and Grid
## Flex Basis
Use the `flexBasis` prop to set the initial main size of a flex item.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `flexBasis` | `flex-basis` | - |
## Flex Direction
Use the `flexDir` or `flexDirection` prop to set the direction of the main axis
in a flex container.
```jsx
Item 1Item 2Item 3
```
When using `Flex` component, the `direction` prop is aliased to `flexDirection`.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------------------------- | ---------------- | -------------- |
| `flexDir`, `flexDirection` | `flex-direction` | - |
## Flex Wrap
Use the `flexWrap` prop to set whether flex items are forced onto one line or
can wrap onto multiple lines.
```jsx
Item 1Item 2Item 3
```
When using `Flex` component, the `wrap` prop is aliased to `flexWrap`.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `flexWrap` | `flex-wrap` | - |
## Flex
Use the `flex` prop to define the flexibility of a flex container or item.
```jsx
```
| Prop | CSS Property | Token Category |
| ------ | ------------ | -------------- |
| `flex` | `flex` | - |
## Flex Grow
Use the `flexGrow` prop to set the flex grow factor of a flex item.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `flexGrow` | `flex-grow` | - |
## Flex Shrink
Use the `flexShrink` prop to set the flex shrink factor of a flex item.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `flexShrink` | `flex-shrink` | - |
## Order
Use the `order` prop to set the order of a flex item.
```jsx
```
| Prop | CSS Property | Token Category |
| ------- | ------------ | -------------- |
| `order` | `order` | - |
## Gap
Use the `gap` prop to set the gap between items in a flex or grid container.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ----- | ------------ | -------------- |
| `gap` | `gap` | `spacing` |
## Grid Template Columns
Use the `gridTemplateColumns` prop to define the columns of a grid container.
```jsx
Item 1Item 2Item 3
```
When using `Grid` component, the `templateColumns` prop is aliased to
`gridTemplateColumns`.
```jsx
Item 1Item 2Item 3
```
## Grid Template Start/End
Use the `gridTemplateStart` and `gridTemplateEnd` props to define the start and
end of a grid container.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ------------------- | --------------------- | -------------- |
| `gridTemplateStart` | `grid-template-start` | - |
| `gridTemplateEnd` | `grid-template-end` | - |
## Grid Template Rows
Use the `gridTemplateRows` prop to define the rows of a grid container.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ------------------ | -------------------- | -------------- |
| `gridTemplateRows` | `grid-template-rows` | - |
## Grid Row Start/End
Use the `gridRowStart` and `gridRowEnd` props to define the start and end of a
grid item.
```jsx
Item 1
Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------------- | ---------------- | -------------- |
| `gridRowStart` | `grid-row-start` | - |
| `gridRowEnd` | `grid-row-end` | - |
## Grid Autoflow
Use the `gridAutoFlow` prop to define how auto-placed items get flowed into the
grid.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------------- | ---------------- | -------------- |
| `gridAutoFlow` | `grid-auto-flow` | - |
## Grid Auto Columns
Use the `gridAutoColumns` prop to specify the size of the grid columns that were
created without an explicit size.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ----------------- | ------------------- | -------------- |
| `gridAutoColumns` | `grid-auto-columns` | - |
## Grid Auto Rows
Use the `gridAutoRows` prop to specify the size of the grid rows that were
created without an explicit size.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------------- | ---------------- | -------------- |
| `gridAutoRows` | `grid-auto-rows` | - |
## Justify Content
Use the `justifyContent` prop to align items along the main axis of a flex
container.
```jsx
Item 1Item 2Item 3
```
When using the `Flex` component, the `justify` prop is aliased to
`justifyContent`.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ---------------- | ----------------- | -------------- |
| `justifyContent` | `justify-content` | - |
## Justify Items
Use the `justifyItems` prop to control the alignment of grid items within their
scope.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------------- | --------------- | -------------- |
| `justifyItems` | `justify-items` | - |
## Align Content
Use the `alignContent` prop to align rows of content along the cross axis of a
flex container when there's extra space.
```jsx
Item 1Item 2Item 3
```
When using the `Flex` component, the `align` prop is aliased to `alignContent`.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------------- | --------------- | -------------- |
| `alignContent` | `align-content` | - |
## Align Items
Use the `alignItems` prop to control the alignment of grid items within their
scope.
```jsx
Item 1Item 2Item 3
```
## Align Self
Use the `alignSelf` prop to control the alignment of a grid item within its
scope.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `alignSelf` | `align-self` | - |
## Place Content
Use the `placeContent` prop to align content along both the block and inline
directions at once. It works like `justifyContent` and `alignContent` combined,
and can be used in flex and grid containers.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------------- | --------------- | -------------- |
| `placeContent` | `place-content` | - |
## Place Items
Use the `placeItems` prop to align items along both the block and inline
directions at once. It works like `justifyItems` and `alignItems` combined, and
can be used in flex and grid containers.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `placeItems` | `place-items` | - |
## Place Self
Use the `placeSelf` prop to align a grid item along both the block and inline
directions at once.
```jsx
Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `placeSelf` | `place-self` | - |
# Interactivity
## Accent Color
Use the `accentColor` prop to set the accent color for browser generated
user-interface controls.
```jsx
// hardcoded
// token value
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `accentColor` | `accent-color` | `colors` |
## Appearance
Use the `appearance` prop to set the appearance of an element.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------ | ------------ | -------------- |
| `appearance` | `appearance` | - |
## Caret Color
Use the `caretColor` prop to set the color of the text cursor (caret) in an
input or textarea
```jsx
// hardcoded
// token value
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `caretColor` | `caret-color` | `colors` |
## Cursor
Use the `cursor` prop to set the mouse cursor image to show when the mouse
pointer is over an element.
```jsx
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `cursor` | `cursor` | - |
## Pointer Events
Use the `pointerEvents` prop to control how pointer events are handled on an
element.
```jsx
Can't click me
```
| Prop | CSS Property | Token Category |
| --------------- | ---------------- | -------------- |
| `pointerEvents` | `pointer-events` | - |
## Resize
Use the `resize` prop to control whether an element is resizable, and if so, in
which directions.
```jsx
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `resize` | `resize` | - |
## Scrollbar
Use the `scrollbar` prop to customize the appearance of scrollbars.
```jsx
Scrollbar hidden
```
## Scroll Behavior
Use the `scrollBehavior` prop to set the behavior for a scrolling box when
scrolling is triggered by the navigation or JavaScript code.
```jsx
Scroll me
```
| Prop | CSS Property | Token Category |
| ---------------- | ----------------- | -------------- |
| `scrollBehavior` | `scroll-behavior` | - |
## Scroll Margin
Use the `scrollMargin*` prop to set margins around scroll containers.
```jsx
Scrollbar Container with block padding
```
| Prop | CSS Property | Token Category |
| ------------------------------------- | ---------------------------- | -------------- |
| `scrollMarginX` ,`scrollMarginInline` | `scroll-margin-inline` | `spacing` |
| `scrollMarginInlineStart` | `scroll-margin-inline-start` | `spacing` |
| `scrollMarginInlineEnd` | `scroll-margin-inline-end` | `spacing` |
| `scrollMarginY` , `scrollMarginBlock` | `scroll-margin-block` | `spacing` |
| `scrollMarginBlockStart` | `scroll-margin-block-start` | `spacing` |
| `scrollMarginBlockEnd` | `scroll-margin-block-end` | `spacing` |
| `scrollMarginLeft` | `scroll-margin-left` | `spacing` |
| `scrollMarginRight` | `scroll-margin-right` | `spacing` |
| `scrollMarginTop` | `scroll-margin-top` | `spacing` |
| `scrollMarginBottom` | `scroll-margin-bottom` | `spacing` |
## Scroll Padding
Use the `scrollPadding*` prop to set padding inside scroll containers.
```jsx
Scrollbar Container with block padding
```
| Prop | CSS Property | Token Category |
| ---------------------------------------- | ----------------------------- | -------------- |
| `scrollPaddingX` , `scrollPaddingInline` | `scroll-padding-inline` | `spacing` |
| `scrollPaddingInlineStart` | `scroll-padding-inline-start` | `spacing` |
| `scrollPaddingInlineEnd` | `scroll-padding-inline-end` | `spacing` |
| `scrollPaddingY` , `scrollPaddingBlock` | `scroll-padding-block` | `spacing` |
| `scrollPaddingBlockStart` | `scroll-padding-block-start` | `spacing` |
| `scrollPaddingBlockEnd` | `scroll-padding-block-end` | `spacing` |
| `scrollPaddingLeft` | `scroll-padding-left` | `spacing` |
| `scrollPaddingRight` | `scroll-padding-right` | `spacing` |
| `scrollPaddingTop` | `scroll-padding-top` | `spacing` |
| `scrollPaddingBottom` | `scroll-padding-bottom` | `spacing` |
## Scroll Snap Margin
Use the `scrollSnapMargin*` prop to set margins around scroll containers.
```jsx
Scrollbar Container with block padding
```
| Prop | CSS Property | Token Category |
| ------------------------ | ---------------------- | -------------- |
| `scrollSnapMargin` | `scroll-margin` | `spacing` |
| `scrollSnapMarginTop` | `scroll-margin-top` | `spacing` |
| `scrollSnapMarginBottom` | `scroll-margin-bottom` | `spacing` |
| `scrollSnapMarginLeft` | `scroll-margin-left` | `spacing` |
| `scrollSnapMarginRight` | `scroll-margin-right` | `spacing` |
## Scroll Snap Type
Use the `scrollSnapType` prop to control how strictly snap points are enforced
in a scroll container.
```jsx
Scroll container with x snap type
```
| Value | |
| ------ | ------------------------------------ |
| `none` | `none` |
| `x` | `x var(--scroll-snap-strictness)` |
| `y` | `y var(--scroll-snap-strictness)` |
| `both` | `both var(--scroll-snap-strictness)` |
## Scroll Snap Strictness
Use the `scrollSnapStrictness` prop to set the scroll snap strictness of an
element. This requires `scrollSnapType` to be set to `x`,`y` or `both`.
It's values can be `mandatory` or `proximity` values, and maps to
`var(--scroll-snap-strictness)`.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| ---------------------- | -------------------------- | -------------- |
| `scrollSnapStrictness` | `--scroll-snap-strictness` | - |
## Touch Action
Use the `touchAction` prop to control how an element's region can be manipulated
by a touchscreen user
```jsx
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `touchAction` | `touch-action` | - |
## User Select
Use the `userSelect` prop to control whether the user can select text within an
element.
```jsx
Can't Select me
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `userSelect` | `user-select` | - |
## Will Change
Use the `willChange` prop to hint browsers how an element's property is expected
to change.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `willChange` | `will-change` | - |
# Layout
## Aspect Ratio
Use the `aspectRatio` prop to set the desired aspect ratio of an element.
```jsx
// raw value
// token
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `aspectRatio` | `aspect-ratio` | `aspectRatios` |
## Break
### Break After
Use the `breakAfter` prop to set how page, column, or region breaks should
behave after an element.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `breakAfter` | `break-after` | - |
### Break Before
Use the `breakBefore` prop to set how page, column, or region breaks should
behave before an element.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `breakBefore` | `break-before` | - |
### Break Inside
Use the `breakInside` prop to set how page, column, or region breaks should
behave inside an element.
```jsx
Item 1Item 2
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `breakInside` | `break-inside` | - |
## Box Decoration Break
Use the `boxDecorationBreak` prop to set how box decorations should behave when
the box breaks across multiple lines, columns, or pages.
```jsx /boxDecorationBreak/
Chakra is great!
```
| Prop | CSS Property | Token Category |
| -------------------- | ---------------------- | -------------- |
| `boxDecorationBreak` | `box-decoration-break` | - |
## Box Sizing
Use the `boxSizing` prop to set the box sizing of an element.
```jsx /boxSizing/
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `boxSizing` | `box-sizing` | - |
## Columns
Use the `columns` prop to set the number of columns for an element.
```jsx
```
| Prop | CSS Property | Token Category |
| --------- | ------------ | -------------- |
| `columns` | `columns` | - |
## Float
Use the `float` prop to set the float of an element.
```jsx /float/
As much mud in the streets...Float me
```
| Prop | CSS Property | Token Category |
| ------- | ------------ | -------------- |
| `float` | `float` | - |
## Clear
Use the `clear` prop to set whether an element must be moved below (cleared)
floating elements that precede it.
```jsx
LeftRight
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
```
| Prop | CSS Property | Token Category |
| ------- | ------------ | -------------- |
| `clear` | `clear` | - |
## Isolation
Use the `isolation` prop to set whether an element should explicitly create a
new stacking context.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `isolation` | `isolation` | - |
## Object Fit
Use the `objectFit` prop to set how an image or video should be resized to fit
its container.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `objectFit` | `object-fit` | - |
## Object Position
Use the `objectPosition` prop to set how an element should be positioned within
its container.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------------- | ----------------- | -------------- |
| `objectPosition` | `object-position` | - |
## Overflow
Use the `overflow` prop to control how content that exceeds an element's
dimensions is handled. This property determines whether to clip the content, add
scrollbars, or display the overflow content.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `overflow` | `overflow` | - |
## Overscroll Behavior
Use the `overscrollBehavior` prop to control what the browser does when reaching
the boundary of a scrolling area.
```jsx
```
| Prop | CSS Property | Token Category |
| -------------------- | --------------------- | -------------- |
| `overscrollBehavior` | `overscroll-behavior` | - |
## Position
Use the `position` utilities to set the position of an element.
```jsx
// shorthand
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `position` | `position` | - |
## Top / Right / Bottom / Left
Use the `top`, `right`, `bottom` and `left` utilities to set the position of an
element.
```jsx
// using spacing tokens
// using hardcoded values
```
Use the logical equivalents of `inset{Start|End}` utilities to set the position
of an element based on the writing mode.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------------------------------------- | -------------------- | -------------- |
| `top` | `top` | `spacing` |
| `right` | `right` | `spacing` |
| `bottom` | `bottom` | `spacing` |
| `left` | `left` | `spacing` |
| `start`, `insetStart`, `insetInlineStart` | `inset-inline-start` | `spacing` |
| `end` , `insetEnd`, `insetInlineEnd` | `inset-inline-end` | `spacing` |
| `insetX`, `insetInline` | `inset-inline` | `spacing` |
| `insetY`, `insetBlock` | `inset-inline` | `spacing` |
## Visibility
Use the `visibility` prop to control the visibility of an element.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------ | ------------ | -------------- |
| `visibility` | `visibility` | - |
## Z-Index
Use the `zIndex` prop to set the z-index of an element.
```jsx
// using hardcoded values
// using token
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `zIndex` | `z-index` | `zIndices` |
# List
## List Style Type
Use the `listStyleType` property to set the type of the list marker.
```jsx
Item 1
Item 2
Item 3
```
| Prop | CSS Property | Token Category |
| --------------- | ----------------- | -------------- |
| `listStyleType` | `list-style-type` | - |
## List Style Position
Use the `listStylePosition` property to set the position of the list marker.
```jsx
Item 1
Item 2
Item 3
```
| Prop | CSS Property | Token Category |
| ------------------- | --------------------- | -------------- |
| `listStylePosition` | `list-style-position` | - |
## List Style Image
Use the `listStyleImage` property to set the image of the list marker.
```jsx
Item 1
Item 2
Item 3
```
| Prop | CSS Property | Token Category |
| ---------------- | ------------------ | -------------- |
| `listStyleImage` | `list-style-image` | `assets` |
## Markers
Use the `_marker` property to set the marker of a list item.
```jsx /_marker/
Item 1
Item 2
Item 3
```
# Sizing
## Width
Use the `width` or `w` property to set the width of an element.
```jsx
// hardcoded values
// token values
```
### Fractional width
Use can set fractional widths using the `width` or `w` property.
Values can be within the following ranges:
- Thirds: `1/3` to `2/3`
- Fourths: `1/4` to `3/4`
- Fifths: `1/5` to `4/5`
- Sixths: `1/6` to `5/6`
- Twelfths: `1/12` to `11/12`
```jsx
// half width
// thirds
// fourths
// fifths
// sixths
// twelfths
```
### Viewport width
Use the modern viewport width values `dvw`, `svw`, `lvw`.
> `dvw` maps to `100dvw`, `svw` maps to `100svw`, `lvw` maps to `100lvw`.
```jsx
// shorthand
```
| Prop | CSS Property | Token Category |
| ------------ | ------------ | -------------- |
| `w`, `width` | `width` | `sizes` |
## Max width
Use the `maxWidth` or `maxW` property to set the maximum width of an element.
```jsx
// hardcoded values
// shorthand
// token values
// shorthand
```
| Prop | CSS Property | Token Category |
| ------------------ | ------------ | -------------- |
| `maxW`, `maxWidth` | `max-width` | `sizes` |
## Min width
Use the `minWidth` or `minW` property to set the minimum width of an element.
```jsx
// hardcoded values
// shorthand
// token values
// shorthand
```
| Prop | CSS Property | Token Category |
| ------------------ | ------------ | -------------- |
| `w`, `width` | `width` | `sizing` |
| `maxW`, `maxWidth` | `max-width` | `sizing` |
| `minW`, `minWidth` | `min-width` | `sizing` |
## Height
Use the `height` or `h` property to set the height of an element.
```jsx
// hardcoded values
// shorthand
// token values
// shorthand
```
### Fractional height
Use can set fractional heights using the `height` or `h` property.
Values can be within the following ranges:
- Thirds: `1/3` to `2/3`
- Fourths: `1/4` to `3/4`
- Fifths: `1/5` to `4/5`
- Sixths: `1/6` to `5/6`
```jsx
// shorthand
```
### Relative heights
Use the modern relative height values `dvh`, `svh`, `lvh`.
> `dvh` maps to `100dvh`, `svh` maps to `100svh`, `lvh` maps to `100lvh`.
```jsx
// shorthand
```
## Max height
Use the `maxHeight` or `maxH` property to set the maximum height of an element.
```jsx
// hardcoded values
// shorthand
// token values
// shorthand
```
## Min height
Use the `minHeight` or `minH` property to set the minimum height of an element.
```jsx
// hardcoded values
// shorthand
// token values
// shorthand
```
| Prop | CSS Property | Token Category |
| ------------------- | ------------ | -------------- |
| `h`, `height` | `height` | `sizes` |
| `maxH`, `maxHeight` | `max-height` | `sizes` |
| `minH`, `minHeight` | `min-height` | `sizes` |
# Spacing
## Padding
### All sides
Use the `padding` prop to apply padding on all sides of an element
```jsx
// raw value
// shorthand
// token value
// shorthand
```
| Prop | CSS Property | Token Category |
| ------------- | ------------ | -------------- |
| `p`,`padding` | `padding` | `spacing` |
### Specific side
Use the `padding{Left,Right,Top,Bottom}` to apply padding on one side of an
element
```jsx
// shorthand
// shorthand
```
Use the `padding{Start,End}` props to apply padding on the logical axis of an
element based on the text direction.
```jsx
// shorthand
// shorthand
```
| Prop | CSS Property | Token Category |
| --------------------- | ---------------------- | -------------- |
| `pl`, `paddingLeft` | `padding-left` | `spacing` |
| `pr`, `paddingRight` | `padding-right` | `spacing` |
| `pt`, `paddingTop` | `padding-top` | `spacing` |
| `pb`, `paddingBottom` | `padding-bottom` | `spacing` |
| `ps`, `paddingStart` | `padding-inline-start` | `spacing` |
| `pe`, `paddingEnd` | `padding-inline-end` | `spacing` |
### Horizontal and Vertical padding
Use the `padding{X,Y}` props to apply padding on the horizontal and vertical
axis of an element
```jsx
// shorthand
// shorthand
```
| Prop | CSS Property | Token Category |
| --------------------- | ---------------------- | -------------- |
| `p`,`padding` | `padding` | `spacing` |
| `pl`, `paddingLeft` | `padding-left` | `spacing` |
| `pr`, `paddingRight` | `padding-right` | `spacing` |
| `pt`, `paddingTop` | `padding-top` | `spacing` |
| `pb`, `paddingBottom` | `padding-bottom` | `spacing` |
| `px`, `paddingX` | `padding-inline` | `spacing` |
| `py`, `paddingY` | `padding-block` | `spacing` |
| `ps`, `paddingStart` | `padding-inline-start` | `spacing` |
| `pe`, `paddingEnd` | `padding-inline-end` | `spacing` |
## Margin
### All sides
Use the `margin` prop to apply margin on all sides of an element
```jsx
// shorthand
```
| Prop | CSS Property | Token Category |
| ------------ | ------------ | -------------- |
| `m`,`margin` | `margin` | `spacing` |
### Specific side
Use the `margin{Left,Right,Top,Bottom}` to apply margin on one side of an
element
```jsx
// shorthand
// shorthand
```
Use the `margin{Start,End}` properties to apply margin on the logical axis of an
element based on the text direction.
```jsx
// shorthand
// shorthand
```
| Prop | CSS Property | Token Category |
| -------------------- | --------------------- | -------------- |
| `ml`, `marginLeft` | `margin-left` | `spacing` |
| `mr`, `marginRight` | `margin-right` | `spacing` |
| `mt`, `marginTop` | `margin-top` | `spacing` |
| `mb`, `marginBottom` | `margin-bottom` | `spacing` |
| `ms`, `marginStart` | `margin-inline-start` | `spacing` |
| `me`, `marginEnd` | `margin-inline-end` | `spacing` |
### Horizontal and Vertical margin
Use the `margin{X,Y}` properties to apply margin on the horizontal and vertical
axis of an element
```jsx
// shorthand
// shorthand
```
| Prop | CSS Property | Token Category |
| --------------- | ------------- | -------------- |
| `mx`, `marginX` | `margin-left` | `spacing` |
| `my`, `marginY` | `margin-top` | `spacing` |
## Spacing Between
Use the `space{X,Y}` props to apply spacing between elements. This approach uses
the owl selector `> * + *` to apply the spacing between the elements using
`margin*` properties.
:::info
It's recommended to use the `space` prop over the `gap` prop for spacing when
you need negative spacing.
:::
```jsx
Item 1Item 2Item 3Item 1Item 2Item 3
```
| Prop | CSS Property | Token Category |
| -------- | --------------------- | -------------- |
| `spaceX` | `margin-inline-start` | `spacing` |
| `spaceY` | `margin-block-start` | `spacing` |
# SVG
## Fill
Use the `fill` prop to set the fill color of an SVG element.
```jsx
```
| Prop | CSS Property | Token Category |
| ------ | ------------ | -------------- |
| `fill` | `fill` | `colors` |
## Stroke
Use the `stroke` prop to set the stroke color of an SVG element.
```jsx
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `stroke` | `stroke` | `colors` |
## Stroke Width
Use the `strokeWidth` prop to set the stroke width of an SVG element.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `strokeWidth` | `stroke-width` | `borderWidths` |
# Tables
## Border Spacing
Control the border-spacing property of a table.
```jsx
Cell 1
Cell 2
```
| Prop | CSS Property | Token Category |
| --------------- | ---------------- | -------------- |
| `borderSpacing` | `border-spacing` | `spacing` |
## Border Spacing X
Use the `borderSpacingX` prop to set the horizontal border-spacing property of a
table.
```jsx
Cell 1
Cell 2
```
| Prop | CSS Property | Token Category |
| ---------------- | ---------------- | -------------- |
| `borderSpacingX` | `border-spacing` | `spacing` |
## Border Spacing Y
Use the `borderSpacingY` prop to set the vertical border-spacing property of a
table.
```jsx
Cell 1
Cell 2
```
| Prop | CSS Property | Token Category |
| ---------------- | ---------------- | -------------- |
| `borderSpacingY` | `border-spacing` | `spacing` |
## Caption Side
Use the `captionSide` prop to set the side of the caption of a table.
```jsx
This is a caption
Cell 1
Cell 2
```
| Prop | CSS Property | Token Category |
| ------------- | -------------- | -------------- |
| `captionSide` | `caption-side` | - |
# Transforms
## Scale
Use the `scale` prop to control the scale of an element.
```jsx
```
When the `scale` prop is set to `auto`, the `scaleX` and `scaleY` props are used
to control the scale of the element.
| Prop | CSS Property | Token Category |
| ------- | ------------ | -------------- |
| `scale` | `scale` | - |
## Scale X
Use the `scaleX` prop to control the scaleX property of an element. This
requires the `scale` prop to be set to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `scaleX` | `--scale-x` | - |
## Scale Y
Use the `scaleY` prop to control the scaleY property of an element. This
requires the `scale` prop to be set to `auto`.
```jsx
```
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `scaleY` | `--scale-y` | - |
## Rotate
Use the `rotate` prop to control the rotate property of an element.
```jsx
```
When the `rotate` prop is set to `auto`, the `rotateX` and `rotateY` props are
used to control the rotate of the element.
| Prop | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `rotate` | `rotate` | - |
## Rotate X
Use the `rotateX` prop to control the rotateX property of an element.
```jsx
```
| Prop | CSS Property | Token Category |
| --------- | ------------ | -------------- |
| `rotateX` | `--rotate-x` | - |
## Rotate Y
Use the `rotateY` prop to control the rotateY property of an element.
```jsx
```
| Prop | CSS Property | Token Category |
| --------- | ------------ | -------------- |
| `rotateY` | `--rotate-y` | - |
## Translate
Use the `translate` prop to control the translate property of an element.
```jsx
```
When the `translate` prop is set to `auto`, the `translateX` and `translateY`
props are used to control the translate of the element.
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `translate` | `translate` | - |
## Translate X
Use the `translateX` prop to control the translateX property of an element. This
requires the `translate` prop to be set to `auto`.
```jsx
// hardcoded values
// token values
```
| Prop | CSS Property | Token Category |
| ------------ | --------------- | -------------- |
| `translateX` | `--translate-x` | `spacing` |
## Translate Y
Use the `translateY` prop to control the translateY property of an element. This
requires the `translate` prop to be set to `auto`.
```jsx
// hardcoded values
// token values
```
| Prop | CSS Property | Token Category |
| ------------ | --------------- | -------------- |
| `translateY` | `--translate-y` | `spacing` |
# Transitions
## Transition
Use the `transition` prop to control the transition of an element.
```jsx
// hardcoded value
Hover me
// shortcut value
Hover me
```
| Prop | CSS Property | Token Category |
| ------------ | ------------ | -------------- |
| `transition` | `transition` | - |
## Transition Timing Function
Use the `transitionTimingFunction` prop to control the timing function of a
transition.
```jsx
Hover me
```
| Prop | CSS Property | Token Category |
| -------------------------- | ---------------------------- | -------------- |
| `transitionTimingFunction` | `transition-timing-function` | `easings` |
## Transition Duration
Use the `transitionDuration` prop to control the duration of a transition.
```jsx
Hover me
```
| Prop | CSS Property | Token Category |
| -------------------- | --------------------- | -------------- |
| `transitionDuration` | `transition-duration` | `durations` |
## Transition Delay
Use the `transitionDelay` prop to control the delay of a transition.
```jsx
Hover me
```
| Prop | CSS Property | Token Category |
| ----------------- | ------------------ | -------------- |
| `transitionDelay` | `transition-delay` | `durations` |
## Animation
Use the `animation` prop to control the animation of an element.
```jsx
```
| Prop | CSS Property | Token Category |
| ----------- | ---------------- | -------------- |
| `animation` | `animation-name ` | `animations` |
## Animation Name
Use the `animationName` prop to control the name of an animation. Compose
multiple animation names to create complex animations.
:::info
The value of the `animation` prop points to a global keyframe animation. Use the
`theme.keyframes` object to define the animation.
:::
```jsx
```
| Prop | CSS Property | Token Category |
| --------------- | ---------------- | -------------- |
| `animationName` | `animation-name` | `animations` |
## Animation Timing Function
Use the `animationTimingFunction` prop to control the timing function of an
animation.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------------- | --------------------------- | -------------- |
| `animationTimingFunction` | `animation-timing-function` | `easings` |
## Animation Duration
Use the `animationDuration` prop to control the duration of an animation.
```jsx
```
| Prop | CSS Property | Token Category |
| ------------------- | -------------------- | -------------- |
| `animationDuration` | `animation-duration` | `durations` |
## Animation Delay
Use the `animationDelay` prop to control the delay of an animation.
```jsx
```
| Prop | CSS Property | Token Category |
| ---------------- | ----------------- | -------------- |
| `animationDelay` | `animation-delay` | `durations` |
# Typography
## Font Family
Use the `fontFamily` prop to set the font family of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `fontFamily` | `font-family` | `fonts` |
## Font Size
Use the `fontSize` prop to set the font size of a text element.
```jsx
// hardcoded values
Hello WorldHello World
// token values
Hello WorldHello WorldHello World
```
| Prop | CSS Property | Token Category |
| ---------- | ------------ | -------------- |
| `fontSize` | `font-size` | `fonts` |
## Text Styles
Use the `textStyle` prop to apply both a font size, line height, and letter
spacing composition at once.
```jsx
Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
```
| Prop | Config |
| ----------- | ------------------ |
| `textStyle` | `theme.textStyles` |
## Font Style
Use the `fontStyle` prop to set the font style of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `fontStyle` | `font-style` | none |
## Font Weight
Use the `fontWeight` prop to set the font weight of a text element.
```jsx
// hardcoded values
Hello World
// token values
Hello World
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `fontWeight` | `font-weight` | `fontWeights` |
## Font Variant Numeric
Use the `fontVariantNumeric` prop to set the font variant numeric of a text
element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| -------------------- | ---------------------- | -------------- |
| `fontVariantNumeric` | `font-variant-numeric` | none |
## Letter Spacing
Use the `letterSpacing` prop to set the letter spacing of a text element.
```jsx
// hardcoded values
Hello World
// token values
Hello WorldHello WorldHello WorldHello World
```
| Prop | CSS Property | Token Category |
| --------------- | ---------------- | ---------------- |
| `letterSpacing` | `letter-spacing` | `letterSpacings` |
## Truncation
Use the `truncate` prop to truncate text.
```jsx
Lorem ipsum dolor sit amet...
```
| Prop | CSS Property | Token Category |
| ---------- | --------------- | -------------- |
| `truncate` | `text-overflow` | none |
## Line Clamp
Use the `lineClamp` prop to truncate multi-line text. Set `lineClamp` to `none`
to disable truncation.
```jsx
Lorem ipsum dolor sit amet...
// revert truncation
Lorem ipsum dolor sit amet...
```
| Prop | CSS Property | Token Category |
| ----------- | ------------------- | -------------- |
| `lineClamp` | `webkit-line-clamp` | none |
## Line Height
Use the `lineHeight` prop to set the line height of a text element.
```jsx
// hardcoded values
Hello World
// token values
Hello World
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `lineHeight` | `line-height` | `lineHeights` |
## Text Align
Use the `textAlign` prop to set the text alignment of a text element.
```jsx
Hello WorldHello WorldHello WorldHello World
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `textAlign` | `text-align` | none |
## Text Color
Use the `color` prop to set the color of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ------- | ------------ | -------------- |
| `color` | `color` | `colors` |
## Text Decoration
Use the `textDecoration` or `textDecor` prop to set the text decoration of a
text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ----------------------------- | ----------------- | -------------- |
| `textDecor`, `textDecoration` | `text-decoration` | none |
## Text Decoration Color
Use the `textDecorationColor` prop to set the text decoration color of a text
element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| --------------------- | ----------------------- | -------------- |
| `textDecorationColor` | `text-decoration-color` | `colors` |
## Text Decoration Style
Use the `textDecorationStyle` prop to set the text decoration style of a text
element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| --------------------- | ----------------------- | -------------- |
| `textDecorationStyle` | `text-decoration-style` | none |
## Text Decoration Thickness
Use the `textDecorationThickness` prop to set the text decoration thickness of a
text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ------------------------- | --------------------------- | -------------- |
| `textDecorationThickness` | `text-decoration-thickness` | none |
## Text Underline Offset
Use the `textUnderlineOffset` prop to set the text underline offset of a text
element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| --------------------- | ----------------------- | -------------- |
| `textUnderlineOffset` | `text-underline-offset` | none |
## Text Transform
Use the `textTransform` prop to set the text transform of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| --------------- | ---------------- | -------------- |
| `textTransform` | `text-transform` | none |
## Text Overflow
Use the `textOverflow` prop to set the text overflow of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| -------------- | --------------- | -------------- |
| `textOverflow` | `text-overflow` | none |
## Text Shadow
Use the `textShadow` prop to set the text shadow of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `textShadow` | `text-shadow` | `shadows` |
## Text Indent
Use the `textIndent` prop to set the text indent of a text element.
```jsx
// hardcoded values
Hello World
// token values
Hello World
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `textIndent` | `text-indent` | `spacing` |
## Vertical Align
Use the `verticalAlign` prop to set the vertical alignment of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| --------------- | ---------------- | -------------- |
| `verticalAlign` | `vertical-align` | none |
## White Space
Use the `whiteSpace` prop to set the white space of a text element.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ------------ | ------------- | -------------- |
| `whiteSpace` | `white-space` | none |
## Word Break
Use the `wordBreak` prop to set whether line breaks appear wherever the text
would otherwise overflow its content box.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| ----------- | ------------ | -------------- |
| `wordBreak` | `word-break` | none |
## Hyphens
Use the `hyphens` prop to set whether hyphens are used in the text.
```jsx
Hello World
```
| Prop | CSS Property | Token Category |
| --------- | ------------ | -------------- |
| `hyphens` | `hyphens` | none |