Composing Utilities

Create your own subset of utilities.

By default the x namespace exposed in xstyled has all utilities built-in. Sometime you may want to reduce your bundle size by choosing only utilities you need.

Create a new namespace

You can't modify the x namespace but you can easily create your own namespace using createX. It allows you to create a namespace from an utility:

import { createX, fontSize } from '@xstyled/...' import { borderInline } from './border-inline' const x = createX(fontSize) // Only "fontSize" is usable <x.div fontSize="10px" />

Compose utilities

Compose utilities using compose method.

import { createX, compose, fontSize, fontWeight } from '@xstyled/...' import { borderInline } from './border-inline' const x = createX(compose(fontSize, fontWeight)) // "fontSize" and "fontWeight" are usable <x.div fontSize="10px" fontWeight="bold" />

Utility groups

To make it easier, utilities are organized in groups, for example typography groups all utilities relative to text edition:

import { createX, typography } from '@xstyled/...' import { borderInline } from './border-inline' const x = createX(typography) // "fontSize", "fontWeight" and all typography utilities are available <x.div fontSize="10px" fontWeight="bold" />

Available groups

bordersborder, borderColor, borderWidth, borderStyle, outline, outlineColor, outlineWidth, outlineStyle, borderRadius, divideY, divideX, divideXReverse, divideYReverse, divideColor, divideStyle, ring, ringInset, ringColor
effectsopacity, boxShadow, textShadow
flexboxesalignItems, alignContent, justifyContent, justifyItems, flexWrap, flexGrow, flexShrink, flexBasis, flexDirection, flex, justifySelf, alignSelf, order
flexboxGridsrow, col
gridsgap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea
interactivityappearance, cursor, pointerEvents, resize, userSelect
layoutdisplay, boxSizing, container, overflow, overflowX, overflowY, zIndex, position, top, right, bottom, left, visibility, overscrollBehavior, objectFit
sizingwidth, height, maxWidth, maxHeight, minWidth, minHeight
spacemargin, marginTop, marginRight, marginBottom, marginLeft, mx, my, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, px, py, spaceY, spaceX, spaceXReverse, spaceYReverse
svgfill, stroke
tablesborderCollapse, tableLayout
transformstransform, transformOrigin, translateX, translateY, rotate, skewX, skewY, scale, scaleX, scaleY
transitionstransition, transitionProperty, transitionDuration, transitionTimingFunction, transitionDelay
typographyfontFamily, fontSize, lineHeight, fontWeight, fontStyle, letterSpacing, color, textTransform, textDecoration, textAlign, verticalAlign, whiteSpace, textOverflow, listStyleType, listStylePosition
Edit this page on GitHub