Poutine React

Get Started

Install Dependencies

npm install @gr4vy/poutine-react

Import CSS (Required)

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

Import Fonts (Recommended)

// 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)

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

Box, Flex, Stack

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

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.

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.

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/

Changelog

See CHANGELOG.md for release history.