Skip to content
All the components you need to kickstart your project 😻
TypeScript Other
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

What is it ?

Npm badge Npm badge Build badge

Thunder UI contains all the React components we use to build our backoffice at Habx. It provides a lot of ways to get your project started like theming.


ThunderUI is available on npm

# using npm
npm install @habx/thunder-ui

# using yarn
yarn add @habx/thunder-ui


import React from 'react'
import ReactDOM from 'react-dom'
import { Card } from '@habx/thunder-ui'

const App = () => (
  <Card title='My first card'>
    Hello world

ReactDOM.render(<App />, document.querySelector('#app'));

Documentation and examples

Thunder form

  <Title underline>Form</Title>
  <Card title='Who are you ?' style={{ marginTop: 32 }}>
      <TextInput label='Your name' value='Bobby'/>
      <RadioSelect label='Your gender' options={[{ value: 1, label: 'Female' }, { value: 0, label: 'Male' }]} value={1} />
      <Slider label='Your age' value={23} onChange={() => null}/>
    <TextArea label='Your description' value='Lorem ipsum'/>

Call a promise to confirm an action

      onClick={async () => {
        const response = await confirm('Voulez-vous continuer');
        action('Confirm Modal response')(response);
      Trigger event

Find what you want at the speed of light with spotlight ⚡

Pressing shift twice displays the spotlight. You can then search in your data and have a quick access to anywhere in your app 🚀

Look at the storybook to learn how to use and customize it !

Use a theme and customize thunder components as you like

Every single component is detailed in the Storybook.


  • Make the ArrayInput component responsive
  • Make the Notification component responsive
  • Provide some code examples
  • Provide a few default themes
You can’t perform that action at this time.