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" />
    )
}