Skip to content
xstyled
  • Docs

Getting Started

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

Core Concepts

  • Utility Props (x.*)
  • Magic Styled Components
  • Preflight
  • Hover, Focus, & Other States
  • Responsive Design
  • Dark Mode
  • Hooks
  • Adding base styles
  • Adding New Utilities
  • Performances
  • Prop Types
  • Transformers
  • TypeScript

Customization

  • Theme
  • Colors
  • Composing Utilities
  • Cache

Layout

  • Box Sizing
  • Container
  • Display
  • Float
  • 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
  • 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
← InstallationRelease Notes →