Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


The Instacart Component Library

Subscribe to updates I use Snacks

Statistics on Snacks

Number of watchers on Github 22
Number of open issues 20
Average time to close an issue 19 days
Main language JavaScript
Average time to merge a PR 4 days
Open pull requests 8+
Closed pull requests 4+
Last commit over 1 year ago
Repo Created over 2 years ago
Repo Last Updated over 1 year ago
Size 4.73 MB
Homepage https://instacart...
Organization / Authorinstacart
Page Updated
Do you use Snacks? Leave a review!
View open issues (20)
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Snacks for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


npm license CircleCI

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.


via yarn

yarn add ic-snacks

via npm

npm install ic-snacks


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

Snacks open issues Ask a question     (View All Issues)
  • over 1 year Add test suite for ensuring server-side/node environment works
  • over 1 year Un-mounting transitions
  • over 1 year Greater than/less than breakpoints
  • over 1 year Documentation: Update form + input validations examples and docs
  • over 1 year Convert font icon to use SVGs
  • over 1 year Expose refs for all components
  • over 1 year Icons not being displayed
  • over 1 year ScrollTrack arrow disappears at end of track
  • almost 2 years IE Support?
  • almost 2 years Add responsive breakpoints to styleguide
  • about 2 years Should we .gitignore the /dist folder
  • about 2 years Allow absolute paths
Snacks open pull requests (View All Pulls)
  • SVG Icons
  • [WIP] Responsive helpers
  • [WIP] Tooltip
  • git ignore dist dir
  • Limit files pulled down when installed
  • add ic-snacks on package when install with npm
  • Add Postal code input
  • Allow absolute path Fixes #24
Snacks questions on Stackoverflow (View All Questions)
  • How to embed Expo Snacks in Stack Overflow?
  • Python vending machine snacks and drinks
  • Snake Game: Why "(Sometimes, lower than 10%)" the snacks (cookies) are created on the snake body?
Snacks list of languages used
Other projects in JavaScript