Code Monkey home page Code Monkey logo

graine-ui's Introduction

Graine UI

WIP React component library made with TailwindCSS.

Getting Started

Install Graine UI

$ yarn add graine-ui

or

$ npm install graine-ui

Wrap your app with ThemeProvider

import React from 'react';
import { ThemeProvider } from 'graine-ui';

const App = () => (
  <ThemeProvider>
      {/* Your app here */}
  </ThemeProvider>
);

And... you're good to go!

Usage

import { Button } from 'graine-ui';

const App = () => (
  <ThemeProvider>
    <Button>Hello World</Button>
  </ThemeProvider>
);

Documentation is currently wip, so use types as a reference for now.

Editing source code

Graine UI's source code is hosted on Github. If you want to change something, you can make a PR or open an issue.

Setting up your local environment

First, you need to clone the repository.

$ git clone https://github.com/otomir23/graine-ui.git

Then, you need to install dependencies.

$ yarn install
$ cd example && yarn install

After that, you can start developing.

Local development

Because Graine UI uses TSDX, starting the build hot reload is as simple as running

$ yarn start

To preview the changes, you can run development server.

$ cd example && yarn start

When you are done, you can build the components for production and run tests.

$ yarn build
$ yarn test

Additional resources

Learn more about TSDX here

Learn more about TailwindCSS here.

License

Graine UI is licensed under the MIT License.

graine-ui's People

Contributors

otomir23 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.