---
title: Responsive
description: Responsive helpers and primitives to build responsive UIs with
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)
