---
title: Responsive
description: Responsive helpers and primitives to build responsive UIs.
order: 1
---

import CSSExample from '../../examples/constellation/responsive/css';
import XCSSExample from '../../examples/constellation/responsive/xcss';
import ShowExample from '../../examples/constellation/responsive/show';
import HideExample from '../../examples/constellation/responsive/hide';
import ShowHideExample from '../../examples/constellation/responsive/show-hide';

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

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

## Responsive `css` or `xcss`

Utilize our media queries exposed in `css`, `styled`, or `xcss` as computed keys to build responsive
UIs. Learn more about these media query exports in [usage](/components/primitives/responsive/usage).

### Using with `xcss`

Please use `xcss` whenever possible to ensure consistency and safety with style overrides. Read more
at [xcss](/components/primitives/xcss)

<Example Component={XCSSExample} packageName="@atlaskit/primitives/responsive" />

### Using with `css`

<Example Component={CSSExample} packageName="@atlaskit/primitives/responsive" />

## Responsive primitives

Consider these shortcuts to writing your own custom media queries. Composing with our primitives
will be far quicker and consistent to implement, but may result in excess DOM nodes.

- [Show](/components/primitives/responsive/show)
- [Hide](/components/primitives/responsive/hide)