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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.dependabot
.storybook
config
scripts
src
.babelrc
.eslintrc
.gitignore
LICENSE
README.md
bili.config.ts
jest.config.js
package-lock.json
package.json
tsconfig.json

README.md

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.

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
You can’t perform that action at this time.