Liquid State UI Kit

Liquid state UI kit for Desktop (Web) and Mobile (Web) applications, based on ant design.

Custom components aim to fit into the existing antd system, we continue to support the ability to theme all of our new components using the same themeing mechanism available in antd.

This repository contains custom components and a storybook showing off all of the ant components we use as well as the custom components which are implemented here.

Using the UI Kit

You can install the UI kit into your project with npm or yarn

npm install --save @liquid-state/ui-kit

or with yarn

yarn add @liquid-state/ui-kit

The UI kit code is a set of es6 modules, you will probably need a code bundler such as webpack or rollup to use it.

Additionally the style components are currently uncompiled less files, to enable the theme support, you will need to configure your bundler to support less.

Note: Creating a simple getting started version with compiled CSS is tracked in this issue

Storybook

This project includes a storybook which helps to document each of the components and how to use them. You can include this storybook in your own project by including @liquid-state/ui-kit-stories in your project's storybook configuration. For the basic stories, add the following to your storybook configuration.

require('@liquid-state/ui-kit-stories').default();

Note that unlike normal stories the export is a function which you need to call to build the storybook. This supports advanced subsetting of the UI kit as required for your own projects. See configureStories() for details.

Alternatively you can clone this project and run the stories yourself via

yarn storybook

Todo: Host the storybook so it can be accessed without cloning the repository.

Contributing

We welcome contributions for bugfixes, extensions or new components, there is a contributing guide available on our project wiki.

If you wish to contribute, you are welcome to open an issue to discuss your idea with us, or just open a new pull request!