ChrstphrSands/tail-kit

React UI kit built using tailwindcss

tail-kit

UI kit built using tailwindcss

Demo - https://tail-kit.netlify.app

---

Installation

Install tail-kit using

yarn add @tail-kit/tail-kit

or

npm install @tail-kit/tail-kit

Usage

import React, { useState } from 'react'
import { Button, Input, AtSymbolOutline, KeyOutline } from '@tail-kit/tail-kit'
// import the css or add it to the index.html file
import '@tail-kit/tail-kit/dist/tail-kit.css'

export default function App() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <div className="space-y-4 w-80">
      <Input
        placeholder="Email"
        icon={<AtSymbolOutline />}
        value={email}
        onChange={(event) => {
          setEmail(event.target.value)
        }}
      />
      <Input
        placeholder="Password"
        icon={<KeyOutline />}
        type="password"
        value={password}
        onChange={(event) => {
          setPassword(event.target.value)
        }}
      />
      <Button
        label="Login"
        className="w-full"
        buttonType={Button.ButtonType.primary}
        disabled={!email || !password}
      />
    </div>
  )
}

Contributing

We are working on making this project fully open source. We appreciate any contributions you might make.

Bug reports and feature request are welcome but, please use the correct template.

Please check out our Contribution Guide. It includes contribution guidelines and information on how to run and develop the project.

Logo

Logo vector created by sentavio - www.freepik.com