Popover component renders an overlay of content anchored to a trigger button (or specific positioning element). It can be triggered by click (or keypress), by hover (or keyboard focus – as a tooltip), or programatically

npm install @paprika/popover@0.3.29


Paprika logo


Getting started

Our list of components can be find for now at npm.

Paprika has a peerDependecy of styled-components so make sure to install it as a dependency in your project.

All paprika components can be installed as:

  npm install @paprika/ComponentToConsume


  yarn add @paprika/ComponentToConsume

Contributors guide.

Basic installation

Follow the next steps to start coding on paprika

1.- Install dependencies

$ yarn

2.- Link packages with Lerna

$ npx lerna bootstrap

That's all you are ready to go from here you can:

run storybook

run storybook and explore paprika's components

$ yarn storybook

run test

We use jest and react-testing-library as one of our tools for testing.

  yarn test


For debugging your jest test via chrome, just run the command below, more info

  yarn test:debug

run docz

$ yarn docz:dev

for building it

$ yarn docz:build

minimum requirements

yarn version

yarn v1.12.3 (which contains yarn audit command) or update via:

$ brew install yarn

node version

v10.0.0 which is required by eslint

Build Translations

The L10n component uses only JavaScript functions -- no YAML parsing is needed. To accomplish this, the prepublish build step [will] converts the .yml files to .js files. If you'd like to run this translation manually, run:

$ yarn translate