# Poutine React

## Get Started

### Install Dependencies

```sh
npm install @gr4vy/poutine-react
```

### Import CSS (Required)

```ts
import '@gr4vy/poutine-react/dist/style.css'
```

### Import Fonts (Recommended)

```ts
// Inter
import '@fontsource/inter'
import '@fontsource/inter/500.css'
import '@fontsource/inter/700.css'

// JetBrains
import '@fontsource/jetbrains-mono'
import '@fontsource/jetbrains-mono/500.css'
import '@fontsource/jetbrains-mono/700.css'
```

### Reset (Optional)

```ts
import '@gr4vy/poutine-react/reset.css'
```

### Box, Flex, Stack

Poutine ships with a several basic components that allow you to use design tokens.

```tsx
import { Box, Stack, Text } from '@gr4vy/poutine-react'

export const App = () => (
  <Box background="blue100" color="white">
    🍟 Poutine is awesome!
  </Box>
)
```

If Box isn't what you want, try Stack.

```tsx
import { Stack, Text } from '@gr4vy/poutine-react'

export const App = () => (
  <Stack gap={8}>
    <Text>Mind</Text>
    <Text>The gap!</Text>
  </Stack>
)
```

### Atoms

Using a new component may be too much when all you want is change a color. The atom function will let you lookup atomic classes.

```tsx
import { atoms } from '@gr4vy/poutine-react'

export const App = () => (
  <button
    className={atoms({
      background: 'blue100',
      color: 'white',
    })}
  >
    🍟 A beautiful button
  </button>
)
```

## Attribution

This project includes icons derived from Coolicons v2.5 by Krystian Kwiecień, licensed under the Creative Commons Attribution 4.0 International License (CC BY 4.0).

Some icons have been modified from their original versions.

- Coolicons: https://coolicons.cool/
- CC BY 4.0 License: https://creativecommons.org/licenses/by/4.0/