Wertarbyte Material-UI Components

Introduction

Here at Wertarbyte, we're using Material-UI for many of our projects.
It already includes a lot of components, but sometimes you need a more complex composed component (e.g. a chip input or a time picker) or something very basic (e.g. dots for pagination).

This is our collection of such components. Every component is maintained in its own repository and published as independent npm package. This way, we hope to give every component the amount of love and care it deserves to make it as good as possible.

If you have a question or a suggestion or found a bug, please tell us using the issue tracker of the related GitHub project. We're also always happy to receive pull requests.

These components only work with Material-UI 1.0.0 or later. If you're still using the legacy version (e.g. 0.20.0), don't worry, we still have many components for you. In fact, not all of our components are ported yet, but we're working on that.

npm npm GitHub stars

Introduce new users to your app with this material style carousel
Read more →

AutoRotatingCarousel

import { AutoRotatingCarousel } from 'material-auto-rotating-carousel';

Desktop mode

Mobile mode (no autoplay)

Slide

import { Slide } from 'material-auto-rotating-carousel';

The Slide supports landscape and portrait mode, which will be selected automatically depending to the landscape prop of the AutoRotatingCarousel that contains it.

Portrait mode

This is a very cool feature

Just using this will blow your mind.

Landscape mode

This is a very cool feature

Just using this will blow your mind.

Chip Input

ChipInput

import ChipInput from 'material-ui-chip-input';
The chip input is used to allow selecting multiple text values. The component is highly customizable and supports everything you would expect from a form component as it is based on Material-UI's FormControl.
clown fish
whale
shark
Many more examples and even a demo on how to add autocompletion with React Autosuggest are available in the storybook.

Image

Image

import Image from 'material-ui-image';

Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.

Image loading patterns
Normal:
Loading:
Error:

Password Field

PasswordField

import PasswordField from 'material-ui-password-field';

The password field can be used to let the user enter a password without needing a second field to enter the password twice. Instead, it provides a toggle button to display the password in clear text so that the user can check what they typed.

In addition to the props documented above, the password field also supports all props that Material-UI's Input component supports.

It can be used like Material-UI's Input component, allowing integration with FormControl.

Enter your secret password

When the password field is disabled, the button is less opaque.
The password field also supports displaying errors, which is nice for form validation.

Your password is too short

Rating

Rating

import Rating from 'material-ui-rating';

Material design star rating component for your star application!

Card UI controls
Normal:
Read Only:
Disabled:
Custom Icons:
Custom Sizes:
Dynamic:
import SearchBar from 'material-ui-search-bar';

Material design search bar

Search patterns
SearchBar example:
SearchBar Disabled example:

Time Picker

TimePicker

import { TimePicker } from 'material-ui-time-picker';

Toggle Icon

ToggleIcon

import ToggleIcon from 'material-ui-toggle-icon';

An animated toggle icon.

The toggle icon can be used to toggle between two icons. When changing the status property, it applies a transition from top left to bottom right. This is perfect for toggling between SomeIcon and its SomeIconOff counterpart.

Below is an interactive example where a toggle icon is used inside an IconButton.

This component aims to be compatible with Material-UI's icon components. It should work wherever SvgIcon and Icon are supported.
Icon button:
Disabled icon button:
    Introduction
    Auto Rotating Carousel
    Chip Input
    Image
    Password Field
    Rating
    Search Bar
    Time Picker
    Toggle Icon
  • Icons
  • Legacy components

    for Material-UI 0.x