New Project, Monday

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

    0.49.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"

    Keywords

    none

    Install

    npm i @gr4vy/poutine-react

    DownloadsWeekly Downloads

    303

    Version

    0.49.0

    License

    MIT

    Unpacked Size

    1.09 MB

    Total Files

    272

    Last publish

    Collaborators

    • luca-gr4vy
    • gr4vy!
    • douglaseggleton
    • cbetta