Poutine React

Get Started

Install Dependencies

yarn add @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

The following icons are modified from Coolicons v2.5 under CC BY 4.0

• "Check"
• "Copy"
• "Download"
• "External Link" (Opens in new window)
• "Link"
• "Star"