# @tail-kit/tail-kit

> UI-Kit made with tailwindcss

Latest version **0.1.21** (published 2021-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tail-kit/tail-kit
pnpm add @tail-kit/tail-kit
yarn add @tail-kit/tail-kit
bun add @tail-kit/tail-kit
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.21 |
| Published | 2021-09-08 |
| First published | 2020-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 219.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abinashpanda, hnagrath09 |
| Keywords | react, ui-kit, tailwindcss |

## Links

- npm: https://www.npmjs.com/package/@tail-kit/tail-kit
- Repository: https://github.com/dopplr-labs/tail-kit
- npm.io page: https://npm.io/package/@tail-kit/tail-kit

## Dependencies (8)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1
- [dayjs](https://npm.io/package/dayjs.md) ^1.9.3
- [dequal](https://npm.io/package/dequal.md) ^2.0.2
- [@reach/rect](https://npm.io/package/@reach/rect.md) ^0.16.0
- [use-memo-one](https://npm.io/package/use-memo-one.md) ^1.1.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) 6.15.4
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.1
- [compute-scroll-into-view](https://npm.io/package/compute-scroll-into-view.md) ^1.0.16

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.1.21 (latest) — 2021-09-08
- 0.1.20 — 2021-08-25
- 0.1.19 — 2021-08-18
- 0.1.18 — 2021-08-11
- 0.1.17 — 2021-08-11
- 0.1.16 — 2021-08-11
- 0.1.15 — 2021-08-06
- 0.1.14 — 2021-07-18
- 0.1.13 — 2021-05-09
- 0.1.12 — 2021-04-03
- 0.1.11 — 2021-01-30
- 0.1.10 — 2020-11-02
- 0.1.9 — 2020-10-26
- 0.1.8 — 2020-10-18
- 0.1.7 — 2020-10-15
- … 10 more at https://npm.io/package/@tail-kit/tail-kit/versions

## README

# tail-kit

![Tests](https://github.com/dopplr-labs/tail-kit/workflows/tests/badge.svg)
[![codecov](https://codecov.io/gh/dopplr-labs/tail-kit/branch/develop/graph/badge.svg)](https://codecov.io/gh/dopplr-labs/tail-kit)
[![NPM ](https://img.shields.io/npm/v/@tail-kit/tail-kit)](https://www.npmjs.com/package/@tail-kit/tail-kit)

UI kit built using `tailwindcss`

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

## Installation

`@tail-kit/tail-kit` depends on additional libraries like `react-icons` and `react-hook-form`. So install tail-kit using

```sh
yarn add @tail-kit/tail-kit react-icons react-hook-form
```

or

```sh
npm install @tail-kit/tail-kit react-icons react-hook-form --save
```

## Usage

```tsx
import React, { useState } from 'react'
import { Form, Input, Select, Button } 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() {
  return (
    <>
      <div className="px-8 font-semibold text-gray-700">
        Create a new employee account
      </div>
      <Form
        onSubmit={onSubmit}
        layout={Form.Layout.VERTICAL}
        className="px-8 py-4"
      >
        <div className="flex w-full space-x-4">
          <Form.Item name="firstName" label="First Name" className="w-full">
            <Input placeholder="Enter first name" />
          </Form.Item>
          <Form.Item name="lastName" label="Last Name" className="w-full">
            <Input placeholder="Enter last name" />
          </Form.Item>
        </div>
        <div className="flex w-full space-x-4">
          <Form.Item name="gender" label="Gender" className="w-full">
            <Select
              options={['Male', 'Female', 'Other']}
              placeholder="Select your gender"
              className="w-full"
            />
          </Form.Item>
          <Form.Item
            name="maritalStatus"
            label="Marital Status"
            className="w-full"
          >
            <Select
              options={['Single', 'Married']}
              placeholder="Select your marital status"
              className="w-full"
            />
          </Form.Item>
        </div>
        <div className="flex w-full space-x-4">
          <Form.Item name="phoneNumber" label="Phone Number" className="w-full">
            <Input placeholder="Enter phone number" />
          </Form.Item>
          <Form.Item name="email" label="Email Address" className="w-full">
            <Input placeholder="Enter email address" />
          </Form.Item>
        </div>
        <Form.Item name="pastExperience" label="Past Experience">
          <textarea
            className="w-full h-24 px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2"
            placeholder="Please write employee's previous experience description"
          />
        </Form.Item>
        <div className="flex justify-end space-x-4">
          <Button>Cancel</Button>
          <Button type="submit" buttonType="primary">
            Submit
          </Button>
        </div>
      </Form>
    </>
  )
}
```

---
_Source: https://npm.io/package/@tail-kit/tail-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._