0.1.9 • Public • Published

Rhythm UI


Form components for Rhythm UI.


For the moment the library can be installed directly from the repository:

npm install @deloitte-digital-au/rhythm-form-react


Using a component

To use a component, just import it:

import Text from '@deloitte-digital-au/rhythm-form-react/lib/controls/Text';

Refer to the component's doc page for a guide to using a specific component.

Using a component's sass file

Each component also has a sass file that you can import and use however you like.

To import, just add /style to end the component's import path.

@import "@deloitte-digital-au/rhythm-form-react/lib/controls/Text/style";

The sass files use a set of default variables which you can customise.

For now, look at src/utils/defaults.scss for the list of variables.

Using CSS modules

If you're using CSS modules in your app, you can still use them here with a bit of effort.

This approach was inspired by the awesome reactstrap.

Each component can take a cssModule prop, which expects a CSS module object. You can use this prop to create a new component with your styles baked in.

You can structure this any way you like, but as an example, in your project:

import Text from '@deloitte-digital-au/rhythm-form-react/lib/controls/Text';

// This could be any css file you want
import textStyles from 'my/text/styles';

export default (props) => <Text cssModules={textStyles} {...props} />

// Now you can use that component elsewhere
import Text from '../forms/styled/Text';

It's important to note that the components inside the component won't be passed the CSS module. This means that things like the won't be styled.

You will need to individually hook up each component from this library with it's own CSS module



Package Sidebar


npm i @deloitte-digital-au/rhythm-form-react

Weekly Downloads






Unpacked Size

131 kB

Total Files


Last publish


  • juscc
  • dkeeghan
  • jennasalau