Neatly Packaged Manuals

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

    5.72.1 • Public • Published

    Algolia UI library

    Build Status

    A set of shareable, reusable UI components for Algolia interfaces, built in React. Complete list available here:

    Migration guide from V2 to V3

    Please read the detailed Migration guide for more details.


    The goal of this library is to provide a set of React UI components that can be easily integrated into any Algolia project.

    The design of these components is identical to the design found on The styles are using Algolia's custom version of Fragments.js.


    1. Run one of the following commands in your project, depending on your package manager:
    npm install @algolia/ui-library --save
    yarn add @algolia/ui-library
    1. Use the UI components like this:
    import React from 'react';
    import { Button, Text } from '@algolia/ui-library';
    const MyComponent = () => (
        <Text>This is some text</Text>
        <Button>This is a button</Button>
    export default MyComponent;

    Specific case: CodeSample component

    For the CodeSample component (located at src/components/CodeSample), you'll need to generate static JSON files located at src/components/CodeSample/generatedHtml in order to make it work with the smallest possible footprint: the library that handles syntax highlighting is heavy, that's why generating static JSON files prevents the client build from being too big.

    To generate the static files, run:

    yarn generate:codesample


    • Clone the repository
    • Install all dependencies: yarn or npm install
    • Launch Storybook: yarn storybook or npm run storybook


    Once you consider that the develop branch holds enough changes to release a new version, here are the 5 steps to follow:

    1. make sure you're releasing the correct version:
    • Breaking change, bump the first number (1.2.3 -> 2.0.0) - Major
    • New feature, bump the second number (1.2.3 -> 1.3.0) - Minor
    • Bug fixing, bump the third number (1.2.3 -> 1.2.4) - Patch
    • Unsure? Check SEMVER
    1. run npm version [your_version]. This will automatically:
    • checkout develop
    • create a branch named with the version number
    • update the version number
    • push it to GitHub
    1. have a look at the auto-generated Update some information manually if needed, commit and push it

    2. create two PRs:

    • one to merge [your_version] into develop (this will update the package.json version)
    • the other one to merge [your_version] into master (this will update the Storybook).
    1. run npm run deploy to push the new release to npm.

    Important: don't delete your branch once merged. This will help keeping a clear history of previous changes.

    Beta V4 releases

    Once you consider that the beta-v4 branch holds enough changes to release a new version, here are the 2 steps to follow:

    1. bump the package.json version (last number)

    2. run npm run version-beta. This will automatically:

    • checkout beta-v4
    • commit any change
    • tag a new version
    • push it to GitHub
    • publish it to NPM




    npm i @algolia/ui-library

    DownloadsWeekly Downloads






    Unpacked Size

    1.95 MB

    Total Files


    Last publish


    • emmanuel.fortin
    • ejaldorau
    • dhaya.b
    • spy-seth
    • alejandrouda
    • lukyvj
    • sepehrf
    • kosai106
    • marielaure
    • mthuret
    • haroenv
    • rayrutjes
    • speedblue
    • jerska
    • raphi
    • cbaptiste
    • ronanlevesque
    • samouss
    • therealwebby
    • francoischalifour
    • jonmontane
    • shipow
    • tkrugg
    • seafoox
    • sylvainh
    • clemfromspace
    • lorrissaintgenez
    • broujo
    • marieglr
    • e-krebs
    • eunjae-lee
    • kombucha
    • h1fra
    • sylvain
    • crawler-team
    • amcdaid106
    • devinalgolia
    • jvenezia
    • otomatik
    • julienbourdeau
    • sophiem03
    • mschreiber
    • sarahdayan
    • alexandremeunier
    • dcoates
    • maximehuang
    • guitek
    • matthewbond
    • cyril.descossy
    • tatsuro
    • danajeremy
    • mathougui
    • xavdh
    • agdavid
    • rasemotte
    • plnech
    • shortcuts
    • praagyajoshi
    • loicsay
    • svensoldin
    • alphonseb
    • leodau
    • fabienmotte
    • sarahfranc
    • millotp