0.1.21 • Published 3 years ago
@tail-kit/tail-kit v0.1.21
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
yarn add @tail-kit/tail-kit react-icons react-hook-form
or
npm install @tail-kit/tail-kit react-icons react-hook-form --save
Usage
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>
</>
)
}
0.1.21
3 years ago
0.1.20
3 years ago
0.1.19
3 years ago
0.1.16
3 years ago
0.1.17
3 years ago
0.1.18
3 years ago
0.1.15
3 years ago
0.1.14
3 years ago
0.1.13
3 years ago
0.1.12
3 years ago
0.1.11
3 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago