udaypydi/tail-ui

A react component library built on tailwind css

Tail UI

A lite weight react component library built with love for React Hooks, Tailwind Css and React Developers. Its easy to get started, simple and consists of tiny components. Its a work in progress. Contributions are most welcome.

A React UI library built using tailwind css

Installtion

Install tailwind-ui-react locally:

// using npm
npm i --save tailwind-ui-react

or

// using yarn
yarn add tailwind-ui-react

Components

• Button
• Container
• Header
• Image
• Input
• Select
• Message

Usage

Button

    import { Button } from 'tail-ui';

    function App(props) {
        return (
            <Button style={{ background: '#0077b5', color: '#ffffff' }} />
        )
    }

Input

import { Input } from 'tail-ui';

function App(props) {
    return (
        <Input placeholder="Placeholder Text..." rounded />
    )
}

Container

import { Container } from 'tail-ui';

function App(props) {
    return (
        <Container fluid raised />
    )
}

Header

import { Header } from 'tail-ui';

function App(props) {
    return (
        <Header headerText="Simple Header" />
    )
}

Image

import { Image } from 'tail-ui';

function App(props) {
    return (
        <Image src="https://demoimage/image.png" rounded />
    )
}

Select

import { Select } from 'tail-ui';

function App(props) {
    return (
        <Select options=[{ text: 'TailUI', value: 'tailui' }}/>
    )
}

Message

import { Message } from 'tail-ui';

function App(props) {
    return (
        <Message className="text-green-500 border-green-500" />
    )
}

tail-ui's Issues

Create npm package

Create a nam library for tail ui

Add issue templates

• Add issue templates for issue and feature requests

Build status sheilds in readme

Should remove travis-ci build status badge

Build NPM lib through GitHub Actions.

Current Library:

The npm library is built using a simple webpack config.

Expected Packaging:

• Add bundling support using rollup
• Add a GitHub action to automate the versioning and bundling flow.
• The GitHub action can be built with a tag based approach. For ex: adding a release tag to the PR or merging the PR to master should build the package.

Expected module bundler

rollup.
Any other bundler with a valid POC is welcome.