---
title: xCSS
description: xCSS is a safer, tokens-first approach to CSS-in-JS.
order: 1
---

import xcssBasic from '../../examples/constellation/xcss/basic';
import xcssInteractive from '../../examples/constellation/xcss/interactivity';
import xcssResponsive from '../../examples/constellation/xcss/responsiveness';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
  name="@atlaskit/primitives"
  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
  directoryName="primitives"
/>

## Basic

`xcss` can pull together different types of interactions and UI in a safer more composable way.

<Example Component={xcssBasic} packageName="@atlaskit/primitives/xcss" />

## Interactivity

To enable interactivity, use familiar selectors like `:hover` and `:focus-visible`.

<Example Component={xcssInteractive} packageName="@atlaskit/primitives/xcss" />


## Responsiveness

xCSS also accepts a subset of media queries at predefined breakpoints:

<Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />
