Skip to content

Usage

Get started with React and Aurity Design System in no time.

Aurity components work in isolation. They are self-supporting, and will only inject the styles they need to display. They don't rely on any global style-sheets such as normalize.css.

You can use any of the components as demonstrated in the documentation. Please refer to each component's demo page to see how they should be imported.

Quick start

Here's a quick example to get you started, it's literally all you need:

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from '@aurity/ui'

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))

Globals

Aurity Design System usage experience can be improved with a handful of important globals that you’ll need to be aware of.

Responsive meta tag

Aurity Design System is developed mobile first, a strategy in which we first write code for mobile devices and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> element.

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>

CssBaseline

Aurity Design System provides an optional CssBaseline component. It fixes some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Versioned Documentation

This documentation always reflects the latest stable version of Aurity Design System. You can find older versions of the documentation on a separate page.

Next step

Now that you have an idea of the basic setup, it's time to learn more about: