@gr4vy/poutine-react
TypeScript icon, indicating that this package has built-in type declarations

1.13.0 • Public • Published

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"

Readme

Keywords

none

Package Sidebar

Install

npm i @gr4vy/poutine-react

Weekly Downloads

520

Version

1.13.0

License

MIT

Unpacked Size

1.11 MB

Total Files

308

Last publish

Collaborators

  • luca-gr4vy
  • gr4vy!
  • douglaseggleton
  • cbetta