Matter

Matter is a tiny collection of UI components. The components are built with Deku. Check out the website for live examples. A React version is available here.

Installation

Matter is available on npm:

npm install matterjs

Or you can download the files directly.

Usage

import { Button } from 'matter';
import element from 'virtual-element';
import { deku, render } from 'deku';

let app = deku(<Button />);
render(app, document.body);

Components

Button

<Button label="Default" size="small" type="default" />

Code

<Code language='javascript'>
{`
var Git = require('gity');

var git = Git()
  .add('*.js')
  .commit('-m "added js files"')
  .run();
`}
</Code>

Menu

let sections = ['Home', 'Profile', 'Messages', 'Notifications'];

<Menu onChange={ change } items={ sections } />

Table

let people = [
  ['Full Name', 'Age'], // header row
  ['Steven Miller', '25'],
  ['Tamara Jordan', '23'],
  ['John Smith', '28']
];

<Table rows={ people } />

Text Field

<TextField placeholder='e.g. Steven Miller' />

Shape

<Shape kind="circle" color="water" size="small"/>

Grid

<Grid>
  // ... children
</Grid>

License

MIT