XStyled

https://github.com/styled-components/xstyled
Admin
xstyled is a utility-first CSS-in-JS framework built for React, offering a flexible and efficient...
Tokens:184,974
Snippets:609
Trust Score:9.5
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install and Develop xstyled Docs Site

Source: https://github.com/styled-components/xstyled/blob/main/website/README.md

Installs project dependencies and starts the development server for the xstyled documentation site. After running, access the site at localhost:8000.

```bash
npm install
npm run develop
```

--------------------------------

### Setup Theme and Preflight with Emotion

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/installation.mdx

Demonstrates setting up the ThemeProvider and Preflight component from '@xstyled/emotion'. This is essential for applying global styles and theme configurations when using Emotion.

```javascript
import { defaultTheme, ThemeProvider, Preflight } from '@xstyled/emotion'

const theme = {
  ...defaultTheme,
  // Customize your theme here
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Preflight />
      {/* ... */}
    </ThemeProvider>
  )
}
```

--------------------------------

### Setup Theme and Preflight with styled-components

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/installation.mdx

Demonstrates setting up the ThemeProvider and Preflight component from '@xstyled/styled-components'. This is crucial for applying global styles and theme configurations to your application.

```javascript
import {
  defaultTheme,
  ThemeProvider,
  Preflight,
} from '@xstyled/styled-components'

const theme = {
  ...defaultTheme,
  // Customize your theme here
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Preflight />
      {/* ... */}
    </ThemeProvider>
  )
}
```

--------------------------------

### Install xstyled System Package

Source: https://github.com/styled-components/xstyled/blob/main/packages/system/README.md

Installs the core @xstyled/system package using npm. This package provides the foundational system for styling components and is a common starting point for using xstyled.

```bash
npm install @xstyled/system
```

--------------------------------

### Install xstyled

Source: https://github.com/styled-components/xstyled/blob/main/website/src/components/getting-started.mdx

Installs the xstyled library along with its peer dependency, styled-components, using npm. This is the initial step to integrate xstyled into your project.

```bash
npm install styled-components @xstyled/styled-components
```

--------------------------------

### Setup Theme and Preflight

Source: https://github.com/styled-components/xstyled/blob/main/website/src/components/getting-started.mdx

Demonstrates the setup of the ThemeProvider and Preflight component from '@xstyled/styled-components' in an application's entry point (e.g., App.js). It shows how to import default theme, customize it, and wrap the application to enable xstyled features.

```javascript
// App.js
import {
  defaultTheme,
  ThemeProvider,
  Preflight,
} from '@xstyled/styled-components'

const theme = {
  ...defaultTheme,
  // Customize your theme here
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Preflight />
      {/* ... */}
    </ThemeProvider>
  )
}
```

--------------------------------

### Start Web Benchmarks (Bash)

Source: https://github.com/styled-components/xstyled/blob/main/benchmarks/README.md

Starts the web benchmark application. This command runs the benchmark suite for @xstyled/styled-components against styled-components in real conditions. The application will be accessible at http://localhost:8083.

```bash
npm start

```

--------------------------------

### Install xstyled with Emotion

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/installation.mdx

Installs the necessary packages for using xstyled with Emotion via npm. This command adds Emotion core packages and the xstyled integration package.

```npm
npm install @emotion/react @emotion/styled @xstyled/emotion
```

--------------------------------

### Install xstyled with styled-components

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/installation.mdx

Installs the necessary packages for using xstyled with styled-components via npm. This command adds both styled-components and the xstyled integration package.

```npm
npm install styled-components @xstyled/styled-components
```

--------------------------------

### Install Dependencies

Source: https://github.com/styled-components/xstyled/blob/main/CONTRIBUTING.md

Installs project dependencies using npm, specifically using the `--legacy-peer-deps` flag to handle potential peer dependency conflicts.

```bash
npm install --legacy-peer-deps
```

--------------------------------

### Install xstyled

Source: https://github.com/styled-components/xstyled/blob/main/README.md

Installs the @xstyled/styled-components and styled-components packages using npm. This is the initial step to integrate xstyled into your React project.

```bash
npm install @xstyled/styled-components styled-components
```

--------------------------------

### xstyled v2 Declarative Components Example

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/upgrade-guide.mdx

Demonstrates the philosophy of xstyled v2, which emphasizes the `x` namespace for creating declarative components and styling without writing raw CSS. It shows how to use the `x` object for styling elements like buttons.

```js
import { x } from '@xstyled/xstyled'

function Button() {
  return (
    <x.button
      type="button"
      color="white"
      transition
      bg={{ _: 'emerald-500', hover: 'emerald-800' }}
    >
      Upgrade
    </x.button>
  )
}
```

--------------------------------

### xstyled v3 Plugins API Configuration

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/upgrade-guide.mdx

Illustrates how to extend xstyled with plugins using a `xstyled.config.js` file. This example shows importing necessary functions and composing system utilities with custom ones like `borderInline`.

```js
import { createCss, system, compose } from '@xstyled/xstyled'
import { borderInline } from './utilities/border-inline'

export const { css, styled, x, createGlobalStyle } = createCss(
  compose(system, borderInline),
)
```

--------------------------------

### Install @xstyled/prop-types

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/core-concepts/prop-types.mdx

Installs the @xstyled/prop-types package using npm.

```bash
npm i @xstyled/prop-types
```

--------------------------------

### xstyled v3 Object States Syntax

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/upgrade-guide.mdx

Demonstrates the new object syntax for specifying states in xstyled v3, which are similar to breakpoints. This includes examples for simple states, mixed screen and state definitions, and nested states.

```js
<x.button color={{ _: 'red-500', hover: 'red-300' }} />
```

```js
// Mixed screens and states
<x.button color={{ _: 'red-600', md: { _: 'red-500', hover: 'red-300' } }} />
// Nested states
<x.div bg={{ first: { odd: 'blue' } } } />
```

--------------------------------

### xstyled v3 Multiple Styles Example

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/upgrade-guide.mdx

Shows how to use the new `multiple` option in the `style` function to declare styles that accept multiple values separated by a comma, such as `box-shadow`.

```js
<x.div boxShadow="light-shadow, big-shadow" />
```

--------------------------------

### Install xstyled with Emotion

Source: https://github.com/styled-components/xstyled/blob/main/packages/emotion/README.md

Installs the xstyled library along with its Emotion integration and React dependencies using npm. This command sets up the necessary packages for using xstyled in a React project.

```bash
npm install @xstyled/emotion @emotion/react @emotion/styled
```

--------------------------------

### Install xstyled with styled-components

Source: https://github.com/styled-components/xstyled/blob/main/packages/styled-components/README.md

Installs the xstyled package along with its peer dependency, styled-components, using npm. This command sets up the necessary libraries for using xstyled in a React project.

```bash
npm install @xstyled/styled-components styled-components
```

--------------------------------

### Build and Develop Website

Source: https://github.com/styled-components/xstyled/blob/main/CONTRIBUTING.md

Commands to build the project packages and start the development server for the project's website. This is typically done after making code changes.

```bash
# build packages
npm run build
# run docs
cd website
npm run develop
```

--------------------------------

### First Component with styled-components

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/installation.mdx

Shows how to create your first component using xstyled's `x` object with styled-components. This allows for easy styling directly within your JSX.

```javascript
import { x } from '@xstyled/styled-components'

function Button(props) {
  return <x.button bg="blue-500" {...props} />
}
```

--------------------------------

### Responsive Marketing Page Layout Example

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/core-concepts/responsive-design.mdx

A comprehensive example of a marketing page component that adapts its layout based on screen size. It uses xstyled utilities to stack content on small screens and arrange it side-by-side on medium screens and larger, demonstrating responsive `display`, `flexShrink`, and `width`.

```jsx
<>
  <template preview>
    <x.div
      maxWidth={{ _: 'md', md: '2xl' }}
      mx="auto"
      bg="white"
      borderRadius="xl"
      boxShadow="md"
      overflow="hidden"
    >
      <x.div display={{ md: 'flex' }}>
        <x.div flexShrink={{ md: 0 }}>
          <x.img
            h={48}
            w={{ _: '100%', md: 48 }}
            objectFit="cover"
            src="https://images.unsplash.com/photo-1515711660811-48832a4c6f69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80"
            alt="Man looking at item at a store"
          />
        </x.div>
        <x.div p={8}>
          <x.div
            textTransform="uppercase"
            letterSpacing="wide"
            fontSize="sm"
            color="pink-500"
            fontWeight="semibold"
          >
            Case study
          </x.div>
          <x.a
            href="#"
            display="block"
            mt={1}
            fontSize="lg"
            lineHeight="tight"
            fontWeight="medium"
            color="black"
            textDecoration={{ _: 'none', hover: 'underline' }}
          >
            Finding customers for your new business
          </x.a>
          <x.p mt={2} color="gray-500">
            Getting a new business off the ground is a lot of hard work. Here
            are five ideas you can use to find your first customers.
          </x.p>
        </x.div>
      </x.div>
    </x.div>
  </template>
  <x.div
    maxWidth={{ _: 'md', md: '2xl' }}
    mx="auto"
    bg="white"
    borderRadius="xl"
    boxShadow="md"
    overflow="hidden"
  >
    <x.div display={{ md: 'flex' }}>
      <x.div flexShrink={{ md: 0 }}>
        <x.img
          h={48}
          w={{ _: '100%', md: 48 }}
          objectFit="cover"
          src="/img/store.jpg"
          alt="Man looking at item at a store"
        />
      </x.div>
      <x.div p={8}>
        <x.div
          textTransform="uppercase"
          letterSpacing="wide"
          fontSize="sm"
          color="pink-500"
          fontWeight="semibold"
        >
          Case study
        </x.div>
        <x.a
          href="#"
          display="block"
          mt={1}
          fontSize="lg"
          lineHeight="tight"
          fontWeight="medium"
          color="black"
          textDecoration={{ hover: 'underline' }}
        >
          Finding customers for your new business
        </x.a>
        <x.p mt={2} color="gray-500">
          Getting a new business off the ground is a lot of hard work. Here are
          five ideas you can use to find your first customers.
        </x.p>
      </x.div>
    </x.div>
  </x.div>
</>
```

--------------------------------

### Responsive Min-Width Example (JSX)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/sizing/min-width.mdx

Explains how to apply minimum width utilities at different breakpoints using responsive object notation. For example, `minWidth={{ md: 1 }}` applies `minWidth={1}` from the medium breakpoint upwards.

```jsx
<x.div minWidth={{ xs: 1 / 2, md: 1 }} />
```

--------------------------------

### First Component with Emotion

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/installation.mdx

Illustrates creating a simple component using xstyled's `x` object with Emotion. This enables straightforward styling within your JSX when using Emotion.

```javascript
import { x } from '@xstyled/emotion'

function Button(props) {
  return <x.button bg="blue-500" {...props} />
}
```

--------------------------------

### xstyled Basic Positioning Examples

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/layout/top-right-bottom-left.mdx

Demonstrates various positioning utilities provided by xstyled, including absolute positioning, spanning edges, and pinning elements to corners. These examples showcase how to apply styles directly within JSX for layout control.

```jsx
<>
  <x.div
    h={16}
    w={16}
    position="absolute"
    bg="emerald-500"
    fontWeight="extrabold"
    color="white"
    display="flex"
    alignItems="center"
    justifyContent="center"
    borderRadius="md"
  >
    9
  </x.div>
</>

```

--------------------------------

### Flexbox Grid System Example (JSX)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/flexbox/flexbox-grid.mdx

Demonstrates how to use xstyled's 'row' and 'col' props to create a responsive flexbox grid layout. The example showcases equal-width columns and how padding is managed with negative margins on rows.

```jsx
<>
  <template preview>
    <x.div mx={2} color="white" fontWeight="extrabold">
      <x.div row mx={-2} bg="emerald-200" borderRadius="md">
        <x.div col px={2}>
          <x.div bg="emerald-500" py={2} textAlign="center" borderRadius="md">
            col
          </x.div>
        </x.div>
        <x.div col px={2}>
          <x.div bg="emerald-500" py={2} textAlign="center" borderRadius="md">
            col
          </x.div>
        </x.div>
        <x.div col px={2}>
          <x.div bg="emerald-500" py={2} textAlign="center" borderRadius="md">
            col
          </x.div>
        </x.div>
      </x.div>
    </x.div>
  </template>
  <x.div mx={2}>
    <x.div row mx={-2}>
      <x.div col px={2}>
        col
      </x.div>
      <x.div col px={2}>
        col
      </x.div>
      <x.div col px={2}>
        col
      </x.div>
    </x.div>
  </x.div>
</>
```

--------------------------------

### Apply Styles with up breakpoint

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/core-concepts/magic-styled-components.mdx

Shows how to use the `up` utility to apply styles starting from a specific breakpoint upwards, enabling responsive design.

```js
import styled, { css, up } from '@xstyled/..'

const Box = styled.div`
  width: 200px;
  height: 200px;
  ${up(
    'md',
    css`
      height: 300px;
    `,
  )}
`
```

--------------------------------

### Responsive Appearance Utility

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/interactivity/appearance.mdx

Shows how to apply the `appearance` utility responsively using object notation. For example, `appearance={{ md: 'none' }}` applies the utility at medium screen sizes and above.

```jsx
<x.div appearance={{ md: 'none' }} />
```

--------------------------------

### Responsive Transition Property

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/transitions/transition-property.mdx

Illustrates how to apply the `transitionProperty` utility responsively using object notation. This example sets the transition property to 'all' for medium screen sizes and above.

```jsx
<x.div transitionProperty={{ md: 'all' }} />
```

--------------------------------

### Usage Examples for Font Weight

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/typography/font-weight.mdx

Demonstrates how to control the font weight of elements using the `fontWeight` prop with various predefined weight values in xstyled.

```jsx
<>
  <x.p fontWeight="hairline">Computers have lots ...</x.p>
  <x.p fontWeight="thin">Computers have lots ...</x.p>
  <x.p fontWeight="light">Computers have lots ...</x.p>
  <x.p fontWeight="normal">Computers have lots ...</x.p>
  <x.p fontWeight="medium">Computers have lots ...</x.p>
  <x.p fontWeight="semibold">Computers have lots ...</x.p>
  <x.p fontWeight="bold">Computers have lots ...</x.p>
  <x.p fontWeight="extrabold">Computers have lots ...</x.p>
  <x.p fontWeight="black">Computers have lots ...</x.p>
</>
```

--------------------------------

### Align Self: Flex-Start (jsx)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/box-alignment/align-self.mdx

Use `alignSelf="flex-start"` to align an item to the start of the container's cross axis, overriding the container's `align-items` value. This example demonstrates an item positioned at the start.

```jsx
<>
  <template preview>
    <x.div h={24} display="flex" alignItems="stretch" spaceX={2}>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="amber-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        alignSelf="start"
        py={3}
        flex="1 1 0"
        borderRadius="md"
        bg="amber-600"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="amber-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="stretch">
    <div>1</div>
    <x.div alignSelf="flex-start">2</x.div>
    <div>3</div>
  </x.div>
</>
```

--------------------------------

### Justify Self Start Alignment

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/box-alignment/justify-self.mdx

Illustrates `justifySelf='start'` for aligning a grid item to the beginning of its inline axis. The example uses a parent with `justifyItems='stretch'` to show the effect.

```jsx
<>
  <template preview>
    <x.div
      display="grid"
      gridTemplateColumns={3}
      gap={4}
      justifyItems="stretch"
    >
      {Array.from({ length: 6 }, (_, index) => index + 1).map((value) => (
        <x.div
          key={value}
          borderRadius="md"
          h={16}
          bg={value === 2 ? 'amber-500' : 'amber-300'}
          color="white"
          display="flex"
          alignItems="center"
          justifyContent="center"
          fontSize="2xl"
          fontWeight="extrabold"
          px={4}
          justifySelf={value === 2 ? 'start' : null}
        >
          {value === 2 ? '1' : ''}
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div display="grid" justifyItems="stretch">
    {/* ... */}
    <x.div justifySelf="start">1</x.div>
    {/* ... */}
    {/* ... */}
    {/* ... */}
    {/* ... */}
  </x.div>
</>
```

--------------------------------

### Configure Theme Space in xstyled v2

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/upgrade-guide.mdx

Example of how to define the `space` array in your xstyled theme for v2. Default `space` values are no longer provided, requiring explicit definition in the theme if not customized.

```js
const theme = {
  space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
}
```

--------------------------------

### Write First Component

Source: https://github.com/styled-components/xstyled/blob/main/website/src/components/getting-started.mdx

Illustrates how to create a basic component using the `x` object provided by '@xstyled/styled-components'. This example shows applying styles like background color directly via props, leveraging xstyled's utility-first syntax.

```javascript
import { x } from '@xstyled/styled-components'

function Button(props) {
  return <x.button bg="blue-500" {...props} />
}
```

--------------------------------

### Toggle Color Mode with useColorMode Hook

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/core-concepts/dark-mode.mdx

Utilizes the `useColorMode` hook to get the current color mode and a function to set it. This example toggles between 'default' and 'dark' modes via a button click.

```jsx
import React from 'react'
import { useColorMode } from '@xstyled/styled-components'

function Example(props) {
  const [colorMode, setColorMode] = useColorMode()
  return (
    <header>
      <button
        onClick={(e) => {
          setColorMode(colorMode === 'default' ? 'dark' : 'default')
        }}
      >
        Toggle {colorMode === 'default' ? 'Dark' : 'Light'}
      </button>
    </header>
  )
}
```

--------------------------------

### Build xstyled Docs Site

Source: https://github.com/styled-components/xstyled/blob/main/website/README.md

Builds the static assets for the xstyled documentation site. This command compiles the site for deployment.

```bash
npm run build
```

--------------------------------

### Serve xstyled Docs Site Build

Source: https://github.com/styled-components/xstyled/blob/main/website/README.md

Serves the built version of the xstyled documentation site locally. This is useful for testing the production build before deployment. Access the served site at localhost:9000.

```bash
npm run serve
```

--------------------------------

### Responsive Utilities: Emotion vs. xstyled

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/migrate-from-emotion.mdx

Demonstrates applying responsive styles, specifically width, using Emotion's media query syntax and xstyled's shorthand responsive props for simplified media query usage.

```jsx
/** @jsx jsx */
import { jsx } from '@emotion/react'

const Button = ({ children }) => {
  return (
    <button css={{ width: 200, '@media (min-width: 768px)': { width: 300 } }}>
      {children}
    </button>
  )
}
```

```jsx
import { x } from '@xstyled/emotion'

const Button = ({ children }) => {
  return <x.button w={{ _: 200, md: 300 }}>{children}</x.button>
}
```

--------------------------------

### Justify Items: Start (xstyled)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/box-alignment/justify-items.mdx

Demonstrates using the `justifyItems="start"` prop in xstyled to align grid items to the start of their inline axis. This utility maps to the CSS `justify-items: start;` property.

```jsx
<>
  <template preview>
    <x.div
      display="grid"
      gridTemplateColumns={3}
      gap={4}
      justifyItems="start"
      h={32}
    >
      {Array.from({ length: 6 }, (_, index) => index + 1).map((value) => (
        <x.div
          key={value}
          w={16}
          borderRadius="md"
          bg="light-blue-500"
          color="white"
          display="flex"
          alignItems="center"
          justifyContent="center"
          fontSize="2xl"
          fontWeight="extrabold"
        >
          {value}
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div display="grid" justifyItems="start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </x.div>
</>
```

--------------------------------

### Grid Row Start/End Lines with xstyled

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/grid/grid-row.mdx

Illustrates using `gridRow` to define the start and end grid lines for an element, or to span a specific number of rows from a starting line. CSS grid lines are 1-indexed.

```jsx
<>
  <template preview>
    <x.div
      display="grid"
      gridTemplateRows={3}
      gridAutoFlow="column"
      gap={4}
      h={64}
    >
      <x.div
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
        gridRow="2 / span 2"
      >
        1
      </x.div>
      <x.div
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
        gridRow="span 2 / 3"
      >
        2
      </x.div>
      <x.div
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
        gridRow="1 / 4"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="grid" gridTemplateRows={3} gridAutoFlow="column" gap={4}>
    <x.div gridRow="2 / span 2">1</x.div>
    <x.div gridRow="span 2 / 3">2</x.div>
    <x.div gridRow="1 / 4">3</x.div>
  </x.div>
</>
```

--------------------------------

### Control Grid Start/End Lines with Grid Column

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/grid/grid-column.mdx

Illustrates using the `gridColumn` prop with specific line numbers or spans to control an element's starting and ending positions within a CSS grid. It covers `n / span x` and `span x / n` combinations, noting that grid lines start at 1.

```jsx
<>
  <template preview>
    <x.div display="grid" gridTemplateColumns={6} gap={4}>
      <x.div
        h={12}
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
        gridColumn="2 / span 4"
      >
        1
      </x.div>
      <x.div
        h={12}
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
        gridColumn="1 / 3"
      >
        2
      </x.div>
      <x.div
        h={12}
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
        gridColumn="span 2 / 7"
      >
        3
      </x.div>
      <x.div
        h={12}
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
        gridColumn="1 / 7"
      >
        4
      </x.div>
    </x.div>
  </template>
  <x.div display="grid" gridTemplateColumns={6} gap={4}>
    <x.div gridColumn="2 / span 4">1</x.div>
    <x.div gridColumn="1 / 3">2</x.div>
    <x.div gridColumn="span 2 / 7">3</x.div>
    <x.div gridColumn="1 / 7">4</x.div>
  </x.div>
</>
```

--------------------------------

### Responsive Utilities: styled-components vs xstyled (x.*)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/migrate-from-styled-components.mdx

Demonstrates xstyled's simplified responsive utilities using the 'x.*' syntax. It shows how to apply styles conditionally based on breakpoints (e.g., 'md') directly as props, which is more concise than using traditional CSS media queries within styled-components.

```javascript
import styled from 'styled-components'

const Button = styled.div`
  width: 200px;

  @media (min-width: 768px) {
    width: 300px;
  }
`
```

```jsx
import { x } from '@xstyled/emotion'

const Button = ({ children }) => {
  return <x.button w={{ _: 200, md: 300 }}>{children}</x.button>
}
```

--------------------------------

### Import createCss for xstyled Configuration

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/core-concepts/adding-new-utilities.mdx

Demonstrates importing the `createCss` function from `@xstyled/...` to initialize xstyled configuration. This is the first step in setting up a custom xstyled configuration file.

```javascript
import { createCss } from '@xstyled/...'

```

--------------------------------

### Usage Example with Transition Timing Functions

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/transitions/transition-timing-function.mdx

Demonstrates how to use xstyled's `transitionTimingFunction` prop to control CSS transition easing curves for buttons. Includes examples for 'ease-in', 'ease-out', and 'ease-in-out'.

```jsx
<>
  <template preview>
    <x.div display="flex" justifyContent="space-around" alignItems="center">
      <x.button
        fontWeight="medium"
        transition
        transitionTimingFunction="ease-in"
        transitionDuration={700}
        color="white"
        bg={{ _: 'emerald-600', hover: 'indigo-600' }}
        py={3}
        px={6}
        borderRadius="md"
        border={0}
      >
        Hover me
      </x.button>
      <x.button
        fontWeight="medium"
        transition
        transitionTimingFunction="ease-out"
        transitionDuration={700}
        color="white"
        bg={{ _: 'emerald-600', hover: 'indigo-600' }}
        py={3}
        px={6}
        borderRadius="md"
        border={0}
      >
        Hover me
      </x.button>
      <x.button
        fontWeight="medium"
        transition
        transitionTimingFunction="ease-in-out"
        transitionDuration={700}
        color="white"
        bg={{ _: 'emerald-600', hover: 'indigo-600' }}
        py={3}
        px={6}
        borderRadius="md"
        border={0}
      >
        Hover me
      </x.button>
    </x.div>
  </template>
  <x.button
    transition
    transitionDuration={700}
    transitionTimingFunction="ease-in"
  >
    Hover me
  </x.button>
  <x.button
    transition
    transitionDuration={700}
    transitionTimingFunction="ease-out"
  >
    Hover me
  </x.button>
  <x.button
    transition
    transitionDuration={700}
    transitionTimingFunction="ease-in-out"
  >
    Hover me
  </x.button>
</>
```

--------------------------------

### Justify Content Flex Start with xstyled

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/box-alignment/justify-content.mdx

Demonstrates using the `justifyContent='flex-start'` prop in xstyled to align flex items to the start of the container's main axis. This corresponds to the CSS `justify-content: flex-start;` property.

```jsx
<x.div display="flex" justifyContent="flex-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>
```

--------------------------------

### Initialize xstyled with System Utilities

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/core-concepts/adding-new-utilities.mdx

Shows how to initialize xstyled by calling `createCss` with the `system` object, which includes all built-in xstyled utilities. This setup provides access to standard styling props.

```javascript
import { createCss, system } from '@xstyled/...' 

export const { css, styled, x, createGlobalStyle } = createCss(system)

```

--------------------------------

### Lint and Test Project

Source: https://github.com/styled-components/xstyled/blob/main/CONTRIBUTING.md

Commands to ensure code quality by running the linter and to verify that the test suite passes. These are essential steps before submitting a pull request.

```sh-session
$ npm run lint

$ npm run test
```

--------------------------------

### Configure Babel Macro for xstyled Styled Components

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/migrate-from-styled-components.mdx

Sets up the `babel-plugin-macros` to use the styled-components Babel plugin with zero configuration for xstyled projects. This involves adding a specific configuration to your `package.json` or a `babel-plugin-macros` config file, pointing to the xstyled import module.

```js
// babel-plugin-macros.config.js
module.exports = {
  // ...
  // Other macros config
  styledComponents: {
    importModuleName: '@xstyled/styled-components',
  },
}
```

--------------------------------

### Visible Overflow Example (jsx)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/layout/overflow.mdx

Demonstrates the `overflow='visible'` prop in xstyled, which allows content to overflow the element's bounds without clipping. Any content that overflows the bounds of the element will then be visible. This example uses the xstyled library for React.

```jsx
<>
  <template preview>
    <x.div h={32} overflow="hidden">
      <x.div
        overflow="visible"
        h={24}
        px={6}
        py={2}
        borderRadius="md"
        bg="light-blue-200"
      >
        <x.p
          w={{ md: 2 / 3, lg: 1 / 2 }}
          fontFamily="Flow"
          lineHeight={5}
          color="light-blue-700"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
          eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare.
          Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit
          dui, vitae hendrerit lectus volutpat eget
        </x.p>
      </x.div>
    </x.div>
  </template>
  <x.div overflow="visible" h={24}>
    Lorem ipsum dolor sit amet...
  </x.div>
</>
```

--------------------------------

### Background Attachment: Responsive Example

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/backgrounds/background-attachment.mdx

Shows how to control the background attachment at specific breakpoints using responsive object notation. For example, `backgroundAttachment={{ md: 'scroll' }}` applies the utility at medium screen sizes and above.

```jsx
<x.div backgroundAttachment={{ md: 'scroll' }} />
```

--------------------------------

### Enhanced Styled Components: styled-components (Theme) vs xstyled (styled.*)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/migrate-from-styled-components.mdx

Illustrates how xstyled enhances the standard styled-components syntax by allowing direct use of design system tokens (space, colors, radii) as string literals. This contrasts with styled-components' reliance on theme provider access, making xstyled's approach more streamlined for projects with design systems.

```javascript
import styled from 'styled-components'

const Button = styled.button`
  padding: ${(p) => `${p.theme.space[2]} ${p.theme.space[4]}`};
  color: ${(p) => p.theme.colors.white};
  border-radius: ${(p) => p.theme.radii.md};
  font-weight: ${(p) => p.theme.fontWeights.semibold};
  transition: ${(p) => p.theme.transitions.default};
  background-color: ${(p) => p.theme.colors['emerald-500']};

  &:hover {
    background-color: ${(p) => p.theme.colors['emerald-800']};
  }

  &:focus {
    outline: none;
    box-shadow: ${(p) => p.theme.shadows['emerald-ring']};
  }
`
```

```javascript
import styled from '@xstyled/styled-components'

const Button = styled.button`
  padding-top: 2;
  padding-bottom: 2;
  padding-right: 4;
  padding-left: 4;
  color: white;
  border-radius: md;
  font-weight: semibold;
  transition: default;
  background-color: emerald-500;

  &:hover {
    background-color: emerald-800;
  }

  &:focus {
    outline: none;
    box-shadow: emerald-ring;
  }
`
```

--------------------------------

### Auto Overflow Example (jsx)

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/layout/overflow.mdx

Demonstrates the `overflow='auto'` prop in xstyled, which adds scrollbars to an element only when its content overflows. This is useful for containing large amounts of text or elements within a fixed-size container. This example uses the xstyled library for React.

```jsx
<>
  <template preview>
    <x.div h={32} overflow="hidden">
      <x.div
        overflow="auto"
        h={32}
        px={6}
        py={2}
        borderRadius="md"
        bg="red-200"
      >
        <x.p fontFamily="Flow" lineHeight={5} color="red-700">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
          eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare.
          Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit
          dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt
          egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam
          tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare
          tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in
          lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus
          lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed
          id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus
          ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu
          diam convallis mollis a sed leo. Proin congue augue turpis, eget
          rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed
          tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex
          lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu
          turpis. In id felis vulputate, tempor massa eget, malesuada mauris.
          Quisque fringilla consequat metus, luctus scelerisque leo fringilla
          vel.
        </x.p>
      </x.div>
    </x.div>
  </template>
  <x.div overflow="auto" h={32}>
    Lorem ipsum dolor sit amet...
  </x.div>
</>
```

--------------------------------

### Run CLI Benchmarks (Bash)

Source: https://github.com/styled-components/xstyled/blob/main/benchmarks/README.md

Executes various command-line interface benchmarks for xstyled libraries. These commands compare @xstyled/system, @xstyled/styled-components, and @xstyled/emotion against their respective counterparts.

```bash
npm run bench-system

```

```bash
npm run bench-styled-components

```

```bash
npm run bench-emotion

```

--------------------------------

### xstyled Responsive alignSelf Example

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/box-alignment/align-self.mdx

Shows how to apply responsive styles to the alignSelf prop using xstyled's object notation. This example demonstrates setting alignSelf="center" specifically for medium screen sizes and above.

```jsx
<x.div display="grid" alignSelf={{ md: 'center' }}>
  {/* ... */}
</x.div>
```

--------------------------------

### xstyled: Responsive Flex Wrap Example

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/flexbox/flex-wrap.mdx

Demonstrates applying `flexWrap` responsively using object notation. For instance, `flexWrap={{ md: 'wrap-reverse' }}` applies `wrap-reverse` at medium screen sizes and above. This allows for dynamic layout adjustments based on breakpoints.

```jsx
<x.div display="flex" flexWrap={{ md: 'wrap-reverse' }}>
  {/* ... */}
</x.div>
```

--------------------------------

### xstyled alignContent space-around Example

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/box-alignment/align-content.mdx

Demonstrates how to use alignContent="space-around" in xstyled to distribute rows within a flex container, ensuring equal space around each line. This example visualizes the distribution with colored boxes.

```jsx
<>
  <>
    <x.div
      h={48}
      display="flex"
      flexWrap="wrap"
      alignContent="space-around"
      bg="light-blue-200"
      borderRadius="md"
    >
      {Array.from({ length: 5 }, (_, index) => index + 1).map((value) => (
        <x.div key={value} w={1 / 3} p={2}>
          <x.div
            p={2}
            borderRadius="md"
            bg="light-blue-500"
            color="white"
            display="flex"
            alignItems="center"
            justifyContent="center"
            fontSize="2xl"
            fontWeight="extrabold"
          >
            {value}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </>
  <x.div h={48} display="flex" flexWrap="wrap" alignContent="space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </x.div>
</>
```

--------------------------------

### Responsive Transition Application

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/transitions/transition.mdx

Illustrates applying transitions responsively using object notation. The `transition={{ md: 'all' }}` prop applies the 'all' transition utility at medium screen sizes and above.

```jsx
<x.div transition={{ md: 'all' }} />
```

--------------------------------

### SkewY Utility Example - xstyled JSX

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/transforms/skew.mdx

Demonstrates how to skew an element using the `skewY` utility in xstyled. It requires enabling transforms first and then applying the skew angle. The example shows skewing an image element with different angles.

```jsx
<>
  <template preview>
    <x.div
      display="flex"
      flexDirection={{ xs: 'column', md: 'row' }}
      justifyContent="space-around"
      spaceY={{ xs: 0, md: 12 }}
      spaceY={{ xs: 12, md: 0 }}
      my={10}
    >
      {[0, 3, 6, 12].map((angle) => (
        <x.div key={angle} w={24} h={24} bg="amber-300" borderRadius="md">
          <x.img
            h={24}
            w={24}
            transform
            skewY={angle}
            borderRadius="md"
            src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
          />
        </x.div>
      ))}
    </x.div>
  </template>
  <x.img transform skewY={0} />
  <x.img transform skewY={3} />
  <x.img transform skewY={6} />
  <x.img transform skewY={12} />
</>
```

--------------------------------

### Configure Babel Plugin for xstyled Styled Components

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/getting-started/migrate-from-styled-components.mdx

Configures the `babel-plugin-styled-components` to work with xstyled. This setup is necessary for features like server-side rendering, style minification, and better debugging. It requires specifying the `topLevelImportPaths` in your `.babelrc` file.

```js
// .babelrc
{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "topLevelImportPaths": [
          "@xstyled/styled-components",
          "@xstyled/styled-components/no-tags",
          "@xstyled/styled-components/native",
          "@xstyled/styled-components/primitives"
        ]
      }
    ]
  ]
}
```

--------------------------------

### Style Lists with Utilities

Source: https://github.com/styled-components/xstyled/blob/main/website/pages/docs/core-concepts/preflight.mdx

Demonstrates how to apply list styling to unstyled lists using xstyled utilities like `listStyleType` and `listStylePosition`.

```jsx
<x.ul listStyleType="disc" listStylePosition="inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</x.ul>
```

--------------------------------

### Fork and Branch Repository

Source: https://github.com/styled-components/xstyled/blob/main/CONTRIBUTING.md

Steps to fork the xstyled repository and create a new branch for your contributions. This involves cloning the repository and checking out a new branch.

```sh-session
$ git clone https://github.com/<your_username>/xstyled
$ cd xstyled
$ git checkout -b my_branch
```
Tokens:
Raw