Install

$ npm install --save @atomicjolt/atomic-elements

$ yarn add @atomicjolt/atomic-elements

Setup

At the root of your application, you should include the following components:

import { CssVariables } from "@atomicjolt/atomic-elements";

const App = () => (
  <>
    <CssVariables />
    <YourApp />
  </>
);

CSS Variables

The <CssVariables /> component will set the CSS variables used by the Atomic Elements. It is recommended that you use this component at the root of your application. If you don't include this component none of the components will look correct (unless you provide defaults for everything yourself).

Fonts

Atomic Elements makes use of the following Fonts

• Lato (Text Font)
• Material Icons (For the MaterialIcon component & any other components that make use of an icon)
• Material Symbols (Only needed if you want to use the MaterialSybmol component)