JavaScript CSS HTML
Switch branches/tags
v2.0.0 v2.0.0-pre.0 v1.2.1 v1.2.0 v1.1.3 v1.1.2 v1.1.1 v1.0.0 v0.2.2 v0.2.1 v0.2.0 v0.1.1 v0.1.0 v0.0.6 v0.0.5 v0.0.4 v0.0.3 v0.0.2 fyndiq-ui-test@2.1.31 fyndiq-ui-test@2.1.30 fyndiq-ui-test@2.1.29 fyndiq-ui-test@2.1.28 fyndiq-ui-test@2.1.27 fyndiq-ui-test@2.1.26 fyndiq-ui-test@2.1.25 fyndiq-ui-test@2.1.24 fyndiq-ui-test@2.1.23 fyndiq-ui-test@2.1.22 fyndiq-ui-test@2.1.21 fyndiq-ui-test@2.1.20 fyndiq-ui-test@2.1.19 fyndiq-ui-test@2.1.18 fyndiq-ui-test@2.1.17 fyndiq-ui-test@2.1.16 fyndiq-ui-test@2.1.15 fyndiq-ui-test@2.1.14 fyndiq-ui-test@2.1.13 fyndiq-ui-test@2.1.12 fyndiq-ui-test@2.1.11 fyndiq-ui-test@2.1.10 fyndiq-ui-test@2.1.9 fyndiq-ui-test@2.1.8 fyndiq-ui-test@2.1.7 fyndiq-ui-test@2.1.6 fyndiq-ui-test@2.1.5 fyndiq-ui-test@2.1.4 fyndiq-ui-test@2.1.3 fyndiq-ui-test@2.1.2 fyndiq-ui-test@2.1.1 fyndiq-ui-test@2.1.0 fyndiq-ui-test@2.0.4 fyndiq-ui-test@2.0.3 fyndiq-ui-test@2.0.2 fyndiq-ui-test@2.0.1 fyndiq-ui-test@2.0.0 fyndiq-styles-medias@2.0.0 fyndiq-styles-fonts@2.1.1 fyndiq-styles-fonts@2.1.0 fyndiq-styles-fonts@2.0.2 fyndiq-styles-fonts@2.0.1 fyndiq-styles-fonts@2.0.0 fyndiq-styles-colors@2.3.2 fyndiq-styles-colors@2.3.1 fyndiq-styles-colors@2.3.0 fyndiq-styles-colors@2.2.0 fyndiq-styles-colors@2.1.0 fyndiq-styles-colors@2.0.0 fyndiq-illustrations@2.1.1 fyndiq-illustrations@2.1.0 fyndiq-illustrations@2.0.4 fyndiq-illustrations@2.0.3 fyndiq-illustrations@2.0.2 fyndiq-illustrations@2.0.1 fyndiq-icons@2.13.0 fyndiq-icons@2.12.0 fyndiq-icons@2.11.0 fyndiq-icons@2.10.0 fyndiq-icons@2.9.1 fyndiq-icons@2.9.0 fyndiq-icons@2.8.0 fyndiq-icons@2.7.0 fyndiq-icons@2.6.0 fyndiq-icons@2.5.1 fyndiq-icons@2.5.0 fyndiq-icons@2.4.0 fyndiq-icons@2.3.0 fyndiq-icons@2.2.4 fyndiq-icons@2.2.3 fyndiq-icons@2.2.2 fyndiq-icons@2.2.1 fyndiq-icons@2.2.0 fyndiq-icons@2.1.0 fyndiq-icons@2.0.1 fyndiq-icon-star@2.0.1 fyndiq-icon-star@2.0.0 fyndiq-icon-loader@2.0.1 fyndiq-icon-loader@2.0.0 fyndiq-icon-checkmark@2.0.1 fyndiq-icon-checkmark@2.0.0 fyndiq-icon-brand@2.0.1
Nothing to show
Clone or download
Latest commit c8b0e44 Jun 14, 2018

fyndiq-ui logo


Build Status Sketch exports Codecov lerna code style: prettier

Library of reusable components for Fyndiq


Install one of the provided packages (see list below) in your React project:

npm i -S fyndiq-component-button

Every component provide their own style using CSSNext. Thus, you need to be able to import CSS files inside your project. Using Webpack2, you can have an entry similar to this:

module: {
  rules: [
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              modules: true,
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: () => ([

You will need the following loaders:

npm i -D postcss-loader css-loader style-loader extract-text-webpack-plugin postcss-import postcss-cssnext


This git repository is a monorepo built using Lerna. It contains several packages:

Package Version Description
fyndiq-component-alert Β npm Alert component
fyndiq-component-article Β npm Article component
fyndiq-component-brand Β npm Brand component
fyndiq-component-button Β npm Button component
fyndiq-component-checkbox Β npm Checkbox component
fyndiq-component-dropdown Β npm Dropdown component
fyndiq-component-input Β npm Input component
fyndiq-component-loader Β npm Loader component
fyndiq-component-message Β npm Message component
fyndiq-component-modal Β npm Modal component
fyndiq-component-productcard Β npm Product card component
fyndiq-component-productlist Β npm Product list component
fyndiq-component-stars Β npm Stars component
fyndiq-component-table Β npm Table component
fyndiq-component-timeline Β npm Timeline component
fyndiq-component-tooltip Β npm Tooltip component
fyndiq-icons Β npm Icons
fyndiq-illustrations Β npm Illustrations
fyndiq-styles-colors Β npm Default colors
fyndiq-styles-fonts Β npm Default Fonts and helpers
fyndiq-styles-medias Β npm Default media queries


Clone the repository, then run

npm i
npm run bootstrap
npm run dev

The Storybook will be available on port 6006.

To create a new component, create a new folder in the packages/ directory and put your code in src/. Then, add your newly created package to the dependencies of fyndiq-ui-test's package.json file, run npm run bootstrap and restart npm run dev.