Skip to content
πŸƒ Leaf-UI: A react component library built using styled-components
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE chore: remove old ISSUE_TEMPLATE.md May 4, 2018
src feat(DateRangePickerInput/web): support minRange (#195) May 2, 2019
storybook chore(storybook): upgrade storybook to v5 (#191) Mar 29, 2019
.editorconfig initial setup Nov 14, 2017
.eslintignore feat(build): new import syntax Apr 26, 2018
.eslintrc feat(Form): add AmountSchema to yup (#136) Oct 24, 2018
.flowconfig feat(react-native): add support to build react-native components Dec 27, 2017
.gitignore feat(TextArea): create TextArea component for all platforms Oct 25, 2018
.stylelintignore feat(build): new import syntax Apr 26, 2018
.stylelintrc feat(styled-components): upgrade styled-components to v4 (#190) Mar 29, 2019
.travis.yml feat(build): new import syntax Apr 26, 2018
.watchmanconfig feat(react-native): add support to build react-native components Dec 27, 2017
App.js feat(native): update expo, fix font names, code cleanup Feb 12, 2019
CODE_OF_CONDUCT.md chore: add CODE_OF_CONDUCT.md Apr 30, 2018
CONTRIBUTING.md chore(CONTRIBUTING.md): fix broken commit types table May 6, 2018
LICENSE.md add MIT license Apr 29, 2018
README.md feat(styled-components): upgrade styled-components to v4 (#190) Mar 29, 2019
SETUP.md chore: add CONTRIBUTING.md and SETUP.md (#56) Apr 30, 2018
app.json feat(native): update expo, fix font names, code cleanup Feb 12, 2019
babel.config.js feat(storybook): upgrade storybook to v4 Feb 2, 2019
package.json chore(Storybook): add theming as devDependency (#192) Mar 29, 2019

README.md

πŸƒ Leaf-UI

A react component library for web, native and amp built using styled-components

[WARNING: This is a work in progress, API is subject to change]

Installation

npm install -S leaf-ui

Usage

Wrap your App component with ThemeProvider and pass it the leaf-ui theme (or override it with custom a theme)

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import leafUiTheme, { BaseStyles } from 'leaf-ui/theme/web';
import App from './App';

ReactDOM.render(
  <ThemeProvider theme={leafUiTheme}>
    <BaseStyles/>
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
);

Import and use the components in your App.js

// App.js
import React from 'react';
import Button from 'leaf-ui/Button/web';

// for commonjs use,
// import Button from 'leaf-ui/cjs/Button/web';

const App = () => (
  <Button>
    Leaf-UI
  </Button>
);

export default App;

Supported Platforms

  • /web
  • /native
  • /amp

Contribute

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to leaf-ui.

Setup

Follow this quick setup guide to get leaf-ui working on your local machine.

You can’t perform that action at this time.