Get started

Don't like writing CSS or just too lazy to write it? Don't worry, we've got you covered. Use our library and make beautiful React Apps without much CSS. 😮‍💨

All the components are accessible by keyboard too in this repository, and if you find any which aren't working properly, please file an issue in the Github repo. 😬

Install

Matcha-UI is available as an npm package.

// with npm
npm i @agauravdev/matcha-ui

// with yarn
yarn add @agauravdev/matcha-ui
Copy

Use

To use the components, you must put a theme provider context around the main application or around the highest component in which you want to use the library.

import {ThemeProvider} from '@agauravdev/matcha-ui';
import App from './App';
import ReactDOM from 'react-dom';
import React from 'react';

ReactDOM.render(
    <ThemeProvider>
        <App />
    </ThemeProvider>
  document.getElementById('root');
);
Copy

Import the components you want in your UI.

import { Button, Alert } from '@agauravdev/matcha-ui';

and you can use them like

const Component: React.FC = () => (
    <div>
      <Button color="primary" onClick={() => 0}>Click Me!</Button>
      <Alert>This is a test alert</Alert>
    </div>
  )
Copy

Run and develop Matcha-UI locally

Clone the GitHub project then start Storybook.

yarn && yarn run storybook