fannypack/src/_docs/getting-started.mdx

An accessible, composable, and friendly React UI Kit

---
name: Getting Started
order: 1
route: /
---

> Note: Fannypack is still work in progress, meaning that it's APIs will most likely change in the future until a stable release.

# Getting Started

## Installing Fannypack

Run the following command to install **Fannypack**:

```curl
yarn add fannypack
```

## Getting set up

To start using the components, follow these steps:

1. Wrap your application in a `<ThemeProvider>` which is provided by **Fannypack**:

```jsx
import { ThemeProvider } from 'fannypack';

const App = () => (
  <ThemeProvider>
    // ... your app
  </ThemeProvider>
);
```

2. Now you can start using components like so:

```jsx
import { Button } from 'fannypack';

const MyApp = () => (
  <Button>
    Hello world!
  </Button>
);
```

No need to import any stylesheets. 😉

## Importing components

There are two ways to import Fannypack components.

Using:

- Named imports - `import { Button } from 'fannypack';`
- Default imports - `import Button from 'fannypack/Button';`

If you are using **Webpack@>=4**, **Rollup** or **Parcel**, then you can use named imports without it effecting your bundle size. However, if you are using older versions of Webpack or a bundler that does not support tree shaking, it is recommended to use default imports.