bwalker8038 / matter

A UI framework built with Deku

Matter

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

Installation

You can use Browserify or Duo to build Matter, which is available on npm:

npm install matterjs

Usage

import { Button } from 'stevenmiller888/matter';
import element from 'dekujs/virtual-element';
import { deku, render } from 'dekujs/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' />