Skip to content

⌘K

Docs

Getting Started

Introduction
Installation
Playground
Release Notes
Upgrade Guide
Migrate from styled-components
Migrate from Emotion
Browser Support

Core Concepts

Utility First
Preflight
Hover, Focus, & Other States
Responsive Design
Enhanced Styled Components
Dark Mode
Hooks
Adding base styles
Adding New Utilities
Prop Types
Transformers
TypeScript

Customization

Theme
Colors
Composing Utilities

Layout

Box Sizing
Container
Display
Object Fit
Overflow
Overscroll Behavior
Position
Top / Right / Bottom / Left
Visibility
Z-Index

Flexbox

Flex
Flex Direction
Flex Grow
Flex Shrink
Flex Wrap
Grid System
Order

Grid

Gap
Grid Auto Columns
Grid Auto Flow
Grid Auto Rows
Grid Column Start / End
Grid Row Start / End
Grid Template Areas
Grid Template Columns
Grid Template Rows

Box Alignment

Align Content
Align Items
Align Self
Justify Content
Justify Items
Justify Self

Spacing

Margin
Padding
Space Between

Sizing

Width
Max-Width
Min-Width
Height
Max-Height
Min-Height

Typography

Font Family
Font Size
Font Style
Font Weight
Letter Spacing
Line Height
List Style Position
List Style Type
Text Alignment
Text Color
Text Decoration
Text Overflow
Text Transform
Vertical Align
Whitespace

Backgrounds

Background Attachment
Background Clip
Background Color
Background Image
Background Position
Background Repeat
Background Size
Gradient Color Stops

Borders

Border Color
Border Radius
Border Style
Border Width
Divide Color
Divide Style
Divide Width
Ring Color
Ring Width

Effects

Box Shadow
Opacity

Tables

Border Collapse
Table Layout

Transitions

Transition
Transition Delay
Transition Duration
Transition Property
Transition Timing Function

Animations

Animation

Transforms

Transform
Transform Origin
Rotate
Scale
Skew
Translate

Interactivity

Appearance
Cursor
Pointer Events
Resize
User Select

Playground

Try xstyled without leaving your web browser.

Try xstyled directly in the CodeSandbox Playground.

Edit this page on GitHub

← Installation Release Notes →