import { Meta } from '@storybook/addon-docs';

<Meta title="About/Get Started" />

# Get Started

### 1. Install

`yarn add @palmetto/palmetto-components`

or

`npm install @palmetto/palmetto-components`

### 2. Import Global CSS

```jsx
@import '@palmetto/palmetto-components/dist/css/utilities.css';
@import '@palmetto/palmetto-components/dist/css/variables.css';
@import '@palmetto/palmetto-components/dist/css/index.css';
```

### 3. Import Global CSS Reset

We recommend importing our global reset in order to maintain a consistent
look of all components across applications.

```jsx
@import '@palmetto/palmetto-components/dist/css/reset.css'
```

### 4. Import Nexa Font

We recommend importing our brand font, Nexa, for styling headings, etc.

```jsx
@import '@palmetto/palmetto-components/dist/css/fonts';
```

### 5. Basic Usage

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@palmetto/palmetto-components';

function App() {
  return <Button>Hello World</Button>;
}

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

### 6. Theme and Responsive Hooks size context

Wrap your application in the `ThemeProvider` and `ResponsiveProvider` components to provide theme and responsive hooks to your application.

Use the [ResponsiveProvider](?path=/docs/providers-responsiveprovider-overview--default-story) to wrap your application and ensure that responsive hooks have access to the necessary context.

Theming is supported via the [ThemeProvider](?path=/docs/providers-themeprovider-overview--usage) component. This component allows you to set a default theme and a storage key for persisting the theme in local storage.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { ResponsiveProvider } from '@palmetto/palmetto-components';

function App() {
  return <div>Hello World</div>;
}

ReactDOM.render(
  <ThemeProvider defaultTheme="light" storageKey="palmetto-ui-theme">
    <ResponsiveProvider>
      <App />
    </ResponsiveProvider>
  </ThemeProvider>,
  document.querySelector('#app'),
);
```
