TypeScript icon, indicating that this package has built-in type declarations

    0.0.158 • Public • Published


    npm license CircleCI Maintainability Code Coverage Coverage Status

    JavaScript Component Library by Instacart

    Please note: We're still in pre-release stage. If you opt to use Snacks, please be prepared for breaking changes in the future.


    You can use either yarn or npm to install Snacks and its dependencies.

    with yarn

    yarn add 'ic-snacks'

    with npm

    npm install 'ic-snacks'

    Installing peer dependencies

    Snacks has a few peer dependencies required to use the library.

    If you already have these libraries listed in your app's dependencies, there's no need to install them again.

    For the main component library:

    • prop-types v15 or v16
    • @instacart/radium v18+
    • React v15 or v16
    • ReactDom v15 or v16

    If you'd like to use animations: react-transition-group v2.2

    Local Development as a dependancy

    Sometimes it may be helpful to work on this project locally and view the changes in another app. This can be accomplished using npm link

    # From this directory
    npm link
    # go to the app you are working on
    cd ../workspace/my_working_app
    # symlink this app
    npm link ic-snacks

    To reverse the process, you can do the following

    # go to the app you are working on
    cd ../workspace/my_working_app
    # remove symlink
    npm unlink ic-snacks

    with yarn

    yarn add @instacart/radium
    yarn add prop-types
    yarn add react
    yarn add react-dom
    yarn add react-transition-group

    with npm

    npm install @instacart/radium
    npm install prop-types
    npm install react
    npm install react-dom
    npm install react-transition-group


    Using a component:

    import { CircleButton } from 'ic-snacks'
    const MyComponent = props => {
      const doYes = e => { alert('Snacks are the best!') }
      const doNo = e => { alert('Wrong choice, choose again.') }
      return (
          <p>Do you love snacks?</p>
          <CircleButton onClick={doYes}>Yes</CircleButton>
          <CircleButton onClick={doNo}>No</CircleButton>

    A more complicated component:

    import React, { Component } from 'react'
    import { NavigationPills } from 'ic-snacks'
    const choices = [
      { text: 'bananas' },
      { text: 'carrots' },
      { text: 'watermelon' },
      { text: 'snacks' },
      { text: 'kale' },
      { text: 'endives' },
      { text: 'arugula' },
      { text: 'spinach' },
      { text: 'potatoes' }
    class Navigation extends Component {
      static state = {
        activePill: choices[0]
      render() {
        return (
              pills={ choices }
              onPillClick={(e, choice) => {
                setState({ activePill: choice.text })
                console.log('Choice clicked!', choice)
              label='Favorite healthy snack:'

    Full Documentation



    Please see contributing docs


    npm i ic-snacks

    DownloadsWeekly Downloads






    Unpacked Size

    2.79 MB

    Total Files


    Last publish


    • dcocchia
    • nmarks
    • apiv
    • wfro
    • jamesjalandoni
    • veebz
    • brantron
    • j4p3
    • loganmurdock
    • ninjabanjo
    • glenndixon