@atlaskit/primitives/constellation/xcss/examples.mdx

Primitives are token-backed low-level building blocks.

---
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

To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.

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