What is it ?

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.

Installation

ThunderUI is available on npm

# using npm
npm install @habx/thunder-ui

# using yarn
yarn add @habx/thunder-ui

Usage

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

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

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

Documentation and examples

Thunder form

  <Title underline>Form</Title>
  <Card title='Who are you ?' style={{ marginTop: 32 }}>
    <Container>
      <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}/>
    </Container>
    <TextArea label='Your description' value='Lorem ipsum'/>
    <ButtonContainer>
      <Button>Validate</Button>
    </ButtonContainer>
  </Card>

Call a promise to confirm an action

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

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.

TODO

• Make the ArrayInput component responsive
• Make the Notification component responsive
• Provide some code examples
• Provide a few default themes