---
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 xcssConditional from '../../examples/constellation/xcss/conditional-styles';

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](/components/primitives/responsive/breakpoints/examples).

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

## Conditional styles

For conditional styles, try composing styles together via the array with ternary or boolean
operators.

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