Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.

Last update: May 18, 2022

Tail-Kit

version license GitHub issues GitHub Repo stars

Tailwind-Kit

A beautiful and large components and templates kit for TailwindCSS 2.0

Tail-Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS 2.0. It features multiple HTML elements that can be used in all web projects who's use tailwind CSS.

Components

Tailwind Starter Kit comes with 230+ Fully Coded CSS elements.

Templates

Tailwind Starter Kit contains many templates like dashboards, landing pages, login pages etc. All are fully Coded and ready to copy paste.

Tailwind-Kit

Tailwind-Kit

Tailwind-Kit

and much more !!

Live code editor

Tailwind-Kit

Tailwind-kit include a live code editor to change the components code and see in live the modification.

Dark mode

Tailwind-Kit

Most components and templates are implemented with a light and dark version, with the new dark mode 2.0 feature of tailwind CSS.

Documentation

The documentation for the Tailwind-kit is hosted at our website.

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Chrome Firefox Edge Safari Opera

Reporting Issues/ make Pull request

Every Issues, and PR are welcome ! the site is not perfect, there must be typos, bugs, improvements. Do not hesitate to contribe and add your own components/layout.

Getting Started

Tailwind-Kit

Tail-Kit is a static site build with Next.js and typescript.

Prerequisites:

Node.js 10.13 or later

Recommanded : Node v12.18.3

Install dependencies:

npm install
# or
yarn install

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/_index.tsx. The page auto-updates as you edit the file (static folder : /out).

Build the static site:

npm run build
# or
yarn build

🧐 What's inside?

A quick look at the important repo files and directories you'll see in a the project.

.
β”œβ”€β”€ node_modules
β”œβ”€β”€ public
β”œβ”€β”€ pages
β”œβ”€β”€ components
	 β”œβ”€β”€ kit
        β”œβ”€β”€ components
        β”œβ”€β”€ templates
     β”œβ”€β”€ layout
     β”œβ”€β”€ site
β”œβ”€β”€ utils
β”œβ”€β”€ editorTheme.tsx
β”œβ”€β”€ global.css
β”œβ”€β”€ LICENSE
β”œβ”€β”€ next.config.js
β”œβ”€β”€ tailwind.config.js
β”œβ”€β”€ package.json
β”œβ”€β”€ README
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ .gitignore
└── yarn.lock.json
  1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

  2. /public: This directory contain all the public assets that need the project (images, icons).

  3. /pages: This directory contain all pages of the app. See NextJs pages documentation for more details

  4. /components: This directory contain all components and templates of the app.

    1. kit : contains all components and templates used for demonstration/preview. Component/templates are sorted by section (Commerce, Elements, Forms ...). Each section have his directory.
    2. layout : contains all layout used in the application. See NextJs layout documentation for more details
    3. site : contains all component used for the structure of the application (header, footer, home, ...)
  5. /utils: This directory contain all utils classes, like html parser, html beautifier (use to indent the components code on preview)

  6. editorTheme.tsx: This file is the configuration theme (colors) for the components code preview. See react-prism for more details

  7. global.css: This css file contain all the 'custom' css use for the app (home page animation)

  8. LICENSE: Bulma-css is licensed under EULA.

  9. next.config.js: This file contain all the nextJS configuration. Here we use the default one.

  10. tailwind.config.js: This file contain all the Tailwind configuration.

  11. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

  12. README.md: A text file containing useful reference information about your project.

  13. tsconfig.json: The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

  14. .gitignore: This file tells git which files it should not track / not maintain a version history for.

  15. yarn-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

πŸ“‹ Create a new section

Components and templates are sorted by category.

Categories are sorted by section.

A section can have one or more category.

Category can have one or more component/templates.

To add a new main section like Commerce, Element, Form .. you must :

  1. Create your new directory in components/kit/components/{yourSectionName} or components/kit/templates/{yourSectionName}. It's inside this directory that you will put all your components/templates files.

  2. Create a index.tsx file on this new directory. It will contain the description (categories names, components/tempaltes numbers, title, ....) of the section. See other section files for an example.

  3. Each time you want create a new category on a section you will need create a directory in the directory of this one. Then you will put the component/templates file in the category directory.

See an example :

β”œβ”€β”€ components
	 β”œβ”€β”€ kit
     	β”œβ”€β”€ components
        	β”œβ”€β”€ MyNewSection // section directory
            	index.tsx // section description file
            	β”œβ”€β”€ MyCategory // category directory
                		MyComponent.tsx // My component source file
                        MyComponent2.tsx // My component source file
                        ....
        β”œβ”€β”€ templates
     β”œβ”€β”€ layout
     β”œβ”€β”€ site
β”œβ”€β”€ ...
└── ...

πŸ“ Create a new category

As seen just above, to create a new category you need to create a directory on a section that will contains your components. We also need to create the category page.

  1. Create your new directory in pages/components/{yourCategoryName} or pages/templates/{yourCategoryName}. It's inside this directory that we will put the category page code.

  2. Create a index.tsx file on this new directory. It will contain all the components/templates that we want import and see in this category. See other category files for an example.

  3. When index.tsx is created NextJs create a route for this category that we can see on : http://localhost:3000/components/{yourCategoryName} or http://localhost:3000/templates/{yourCategoryName}

βž• Create a new component/templates

Components and templates are classics React functional component.

dark/light mode

If you want that your component have a dark version, use Tailwind classes for dark mode (documentation).

Import the component

The last thing to do is to import your component/template on the wanted category file : (/pages/components/{category}/index.tsx) or (/pages/templates/{category}/index.tsx)

To enabled all feature preview like live edition, dark mode, ... you need to pass our component to ComponentLayout.

ComponentLayout is the layout who will add all buttons (Code, Copy, Dark mode) and the live edition feature on our component.

ComponentLayout take few props :

  • element: The JSX.Element of our component
  • component: The component
  • title: The title of the component display on the panel
  • jsLink: The link of the component codeon github (if need JS to work)
  • needConfiguration: Boolean if the component/template need a custom tailwind configuration to work
  • vertical: Boolean if the code preview is display on side of the component or below
  • showSwitchMode: Boolean if the component have dark/light implementation (Display or hide the dark mode checkbox)
  • containerClasses: Classes to add on the container of the component (ex : add margin, padding ...)
propName propType defaultValue isRequired
element JSX.Element x
component x
title string x
jsLink string
needConfiguration boolean false
vertical boolean false
showSwitchMode boolean false
containerClasses string

Example of the index.tsx file of the toggle category :

import React, { FC } from "react";
import AppLayout from "../../../components/layout/AppLayout";
import ComponentLayout from "../../../components/layout/ComponentLayout";
import SectionHeader from "../../../components/site/header/SectionHeader";
import FormSubscribe from "../../../components/kit/components/form/layout/FormSubscribe";

const TogglePage: FC = () => {
  return (
     <AppLayout
      title="Toggle, Checkbox and Radio buttons components for tailwind css"
      desc="Free and open source toggle, checkbox and radio buttons components for tailwind css"
    >
      <SectionHeader title="Form layout" />
      <ComponentLayout
        title="Subscribe"
        element={<FormSubscribe label="Subscribe" placeholder="Email" />}
        component={FormSubscribe}
      />
    </AppLayout>
  );
};

export default TogglePage;

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Licensing

  • Copyright 2020 Charlie Rabiller

  • Licensed under MIT

GitHub

https://github.com/Charlie85270/tail-kit
Comments
  • 1. UI fixed for "Confirmation Card", Typo fixed

    Hey @Charlie85270,

    I have fixed a UI mistake in Confirmation Card, there were Primary colors on both buttons, which is incorrect from a UI perspective. Also fixed a typo mistake in "Modale with footer actions"

    • Before image

    • After image

    Reviewed by amaan-ahmad at 2021-01-28 15:03
  • 2. Toggle button transition not working

    Hey contributors,

    I tried fixing the transition in the toggle button, but it doesn't seem to work.

    The reason is:

    • transition class name in tailwind does transition on the following properties:
      • background-color
      • border-color
      • color
      • fill
      • stroke
      • opacity
      • box-shadow
      • transform

    We need to apply transition on the position because the toggle element takes checked: right-0.

    It would be great if someone could figure out how to apply transition on "position" property.

    Thanks, Amaan Ahmad.

    Reviewed by amaan-ahmad at 2021-01-29 10:05
  • 3. Mobile view is breaking of Teams > Multiple

    image

    Actual: Image of 2nd team mate is hiding the social information present on card of 1st team mate. Expectation: Image of 2nd team mate must be below the card of 1st team mate.

    Reviewed by xerosanyam at 2021-07-06 11:37
  • 4. asPath instead of pathname

    Hey,

    I noticed a mistake. asPath contains the correct path, while pathname contains the page name. But the page name could be something else too (if it's a dynamic page).

    • pages/test/[slug].js => foo.com/test/bar=> pathname: /test/[slug] asPath: /test/bar .
    Reviewed by ciruz at 2021-01-21 09:29
  • 5. More Components

    Are you accepting the component from more users?If it is possible will you consider adding the checkout form or different cards in your library if so please let me know I will be happy to add those in the library. Please let me know

    Reviewed by shubhsk88 at 2021-01-24 18:43
  • 6. Fix spelling error

    Reviewed by gitryder at 2021-07-30 07:14
  • 7. new timePicker

    Hi and huge thanks for your contribution !

    If you add a new component/template, or modify the core of the app please verify that you have check if :

    • [x] A similar item does not already exist
    • [x] Your item is in the right category
    • [x] The sitemap.xml is up to date (for new section added)
    • [x] My item is logically grouped below similar items
    • [x] The content of my item is realistic (avoid lorem ipsum)
    • [x] All images use in my item are serve locally and as light as possible (use next/image for optimization )
    • [x] If possible, provide a dark implementation of the item
    • [x] I have read and followed the contribution guidelines

    For more information see the contribution guidelines

    Reviewed by Vonder85 at 2021-02-04 17:25
  • 8. How use tsx component in Vuejs project

    Hello,

    First, thanks for you awesome works !

    How can I use Navbar with JS in Nuxtjs project ? Do i need to adapt the react component, or it's possible with other way ?

    Thanks for you support.

    Reviewed by Sorrow81 at 2021-01-30 18:19
  • 9. feat: tooling

    • I have opened a PR regarding this issue, as you have a lot of forks and a lot of people are contributing, I have taken some time to set up tools for this project PR #19
    Reviewed by tomasvn at 2021-01-21 21:23
  • 10. twitter:site should be a twitter username

    Hey,

    the twitter:site attribute: https://github.com/Charlie85270/tail-kit/blob/7a1d12f6fc2215360c83afa94a8e3cf76cb0e6aa/components/site/Meta.tsx#L23 should be a twitter @username.

    Reviewed by ciruz at 2021-01-19 08:00
  • 11. fix: connect id with labels for forms accessibility #18

    This PR aims to resolve #18

    • An optional id attribute was added to <InputText> component PropTypes
    • The value of the htmlFor attribute of input labels was made to evaluate to the props.id value
    • id values were added to already existing components

    Notes

    • I noticed that the name of the package does not follow the convention for naming packages by npm. You may want to change it to fast-ui or tail-kit
    Reviewed by orimdominic at 2021-01-15 06:43
  • 12. Add vercel support - update to nextjs 12

    Adds vercel support.

    Current state This app wont deploy to vercel.com Desired state This app will easily deploy to vercel.com

    The problem The problem was probably caused by vercel not supporting older versions of nextjs - im no sure. Whatever, the build was not passing anyway, and after my changes - it does pass.

    Error from vercel deployment

    Export successful. Files written to /vercel/path0/out
    --
    21:14:52.682 | Done in 37.26s.
    21:14:52.693 | Error: The file "/vercel/path0/.next/routes-manifest.json" couldn't be found. This is normally caused by a misconfiguration in your project.
    21:14:52.693 | Please check the following, and reach out to support if you cannot resolve the problem:
    21:14:52.693 | 1. If present, be sure your `build` script in "package.json" calls `next build`.  2. Navigate to your project's settings in the Vercel dashboard, and verify that the "Build Command" is not overridden, or that it calls `next build`.  3. Navigate to your project's settings in the Vercel dashboard, and verify that the "Output Directory" is not overridden. Note that `next export` does **not** require you change this setting, even if you customize the `next export` output directory. Learn More: https://err.sh/vercel/vercel/now-next-routes-manifest
    
    Reviewed by Toumash at 2022-03-12 09:11
  • 13. [feature] Upgrade to Tailwindcss 3

    I started a fork, to upgrade TailKit to Tailwindcss 3, but ran into problems, some of which are documented in my README.md

    • lint fails for the build/ directory. It should likely be excluded.
    • Cannot upgrade Node past v14 because of Webpack 4.
    • Cannot upgrade React & dependencies past v16 because of react-simple-code-editor v0.11.0

    The biggest problem is that Tailwind 3 requires PostCss 8 & Autoprefixer >=10. You'll notice this in Error: true is not a PostCSS plugin.

    Here are some links with details:

    • https://github.com/postcss/postcss/issues/1420
    • https://github.com/tailwindlabs/tailwindcss/issues/2396
    • https://github.com/vercel/next.js/issues/17236

    Happy bug hunting!

    Reviewed by bingalls at 2021-12-13 02:10
  • 14. Components

    There'd be a lot less boilerplate if you offered stylesheet with applied components like tailwind discusses in maintability section. It would allow users to override some of the styles. I think with the components, you can redeclare a new button that extends your definition.

    Reviewed by janat08 at 2021-08-28 18:45
  • 15. Cart product component .

    A Card or section for products that are in cart With minus and plus circular button and quantity of product listed in between those products . A delete button for removing the product from cart . A little animation like rotation of cart item card will be awesome πŸ˜‡ .

    Thanks in advance to the person who will take this issue . πŸ’«

    Reviewed by PraveenMalethia at 2021-07-10 23:59
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React.
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React.

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Simple light is designed to provide all the basic components a developer need to create a landing page for SaaS products, online services, and more.

May 10, 2022
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

May 13, 2022
Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.
Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.

Notus NextJS A beautiful UI Kit and Admin for Tailwind CSS and NextJS. Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Le

May 12, 2022
Notus React: Free Tailwind CSS UI Kit and Admin
Notus React: Free Tailwind CSS UI Kit and Admin

Notus React A beautiful UI Kit and Admin for Tailwind CSS and React. Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let N

May 6, 2022
CheatSheet - Pre-Configured list of Templates and Approval/Denial Reasons that is free for any Bot List or Bot List Staff to use
CheatSheet - Pre-Configured list of Templates and Approval/Denial Reasons that is free for any Bot List or Bot List Staff to use

Pre-Configured list of templates that any Bot List or Bot List Staff are free to use!

Feb 3, 2022
Startup-Landing - Collection of free top of the line startup landing templates built using react/nextjs/gatsby
Startup-Landing - Collection of free top of the line startup landing templates built using react/nextjs/gatsby

Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!

May 16, 2022
Now UI Kit React - Free Bootstrap 4, React, React Hooks and Reactstrap UI Kit
Now UI Kit React - Free Bootstrap 4, React, React Hooks and Reactstrap UI Kit

Now UI Kit React is a free Bootstrap 4, React, React Hooks and Reactstrap UI Kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.

Apr 7, 2022
Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5
Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

May 12, 2022
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM

?? MERN Stack CRUD Application Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoos

May 4, 2022
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

May 12, 2022
Echo-soundboard - A free, open-source soundboard made using ElectronJS + React
Echo-soundboard - A free, open-source soundboard made using ElectronJS + React

Echo Soundboard by Performave A free, open-source soundboard made using Electron

May 8, 2022
πŸ‘¨β€πŸŽ¨ An open-source portfolio template built with React and Tailwind.
πŸ‘¨β€πŸŽ¨ An open-source portfolio template built with React and Tailwind.

??‍?? An open-source portfolio template built with React and Tailwind.

May 17, 2022
A growing collection of responsive Chakra UI Templates ready to drop into your React project.

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

May 11, 2022
Creates a Module Federation applcation, API server, or library based on one of multiple different templates.

create-mf-app Creates a Module Federation applcation, API server, or library based on one of multiple different templates. npx create-mf-app These pr

May 6, 2022
Ts-next-chakra-motion-kit - Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript

Typescript Next.js Chakra-UI Framer-Motion Starter Kit Start with a powerful tem

May 5, 2022
A React UI Kit based on Tailwind
A React UI Kit based on Tailwind

Windy A React UI Kit based on Tailwind Install npm i @webeetle/windy Pre Requisites Only one thing: your project must use React and Tailwind CSS Docs

May 12, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚑️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

May 9, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

Apr 30, 2022
Nft-marketplace - Reactjs And Smart Contracts Open Source Basic Nft Marketplace App
Nft-marketplace - Reactjs And Smart Contracts Open Source Basic Nft Marketplace App

Open Source Nft Marketplace [Onprogress %1] Reactjs And Smart Contracts Open Sou

May 12, 2022