DOCSEARCHbyAlgolia
Submit Docs

Tail-Kit

repository·main·Indexed 25 days ago

https://github.com/charlie85270/tail-kit

An open-source component and template kit for TailwindCSS 3.0, featuring over 230 fully coded CSS elements and templates for dashboards and landing pages. Built with Next.js and TypeScript, it provides a library of React functional components including alerts, avatars, badges, and navigation elements, along with a system for creating and registering new components and templates.

Tokens
14.5K
Snippets
41
Records
91
Agent score
78%

What's inside tail-kit

  1. Project directory structure overview

    main

    Understanding the key directories in the Tail-Kit repository:

    • public/: Public assets like images and icons.
    • pages/: Contains all application pages (Next.js routing).
    • components/: The core of the kit.
      • kit/: Contains components and templates used for demonstration/preview, organized by section (e.g., Commerce, Elements, Forms).
      • layout/: Contains application layouts.
      • site/: Contains structural components like header, footer, and home.
    • utils/: Utility classes such as HTML parsers and beautifiers.
    • editorTheme.tsx: Configuration for the code preview theme (uses react-prism).
    • global.css: Custom CSS for application-wide styles and animations.
    • tailwind.config.js: Tailwind CSS configuration.

  2. Create a new category page

    main

    To make a new category visible in the application, you must create a corresponding page in the pages directory:

    1. Create a new directory in pages/components/{yourCategoryName} or pages/templates/{yourCategoryName}.
    2. Create an index.tsx file in that directory. This file should import and display the components/templates belonging to that category.
    3. Once created, Next.js will automatically generate a route accessible at http://localhost:3000/components/{yourCategoryName} or http://localhost:3000/templates/{yourCategoryName}.

  3. Create a new component or template section

    main

    To add a new main section (e.g., MyNewSection) to the kit, follow these steps:

    1. Create a new directory in components/kit/components/{yourSectionName} or components/kit/templates/{yourSectionName}.
    2. Create an index.tsx file within that new directory to define the section description (category names, component counts, title, etc.).
    3. To add categories within that section, create a sub-directory for the category and place your component/template files inside it.

    Example Structure:

    components/kit/components/MyNewSection/
├── index.tsx (description file)
└── MyCategory/
    ├── MyComponent.tsx
    └── MyComponent2.tsx

  4. Install and run Tail-Kit locally

    main

    Tail-Kit is a static site built with Next.js and TypeScript. To run it locally, ensure you have Node.js 10.13 or later installed (Node v12.18.3 is recommended).

    Follow these steps to set up the development environment:

    1. Install dependencies using npm or yarn.
    2. Start the development server to view the site at http://localhost:3000.
    3. Edit pages by modifying pages/_index.tsx. The page will auto-update as you save changes.
    4. Build the static site when ready for production.
    # Install dependencies
npm install
# or
yarn install

# Run the development server
npm run dev
# or
yarn dev

# Build the static site
npm run build
# or
yarn build

  5. Create a new component or template

    main

    Components and templates in Tail-Kit are standard React functional components. To implement dark mode support, use standard Tailwind CSS dark mode classes.

    After creating your component, you must register it in the appropriate category file located at:

    • /pages/components/{category}/index.tsx
    • /pages/templates/{category}/index.tsx

  6. Request a new or specific component

    main

    If you need a component that is missing from the Tail-Kit library, you can request it for free by following these steps:

    1. Open a GitHub issue: Go to the repository issues page and create a new issue. You must tag the issue with the enhancement label.
    2. Provide details: In your issue, include a screen, a description, or a link (such as Dribbble or Figma) to the component you want. Providing more details helps ensure the component matches your requirements.
    3. Wait for implementation: The maintainer or community developers will pick up your request. You will be notified via the GitHub issue once the component is available.

  7. Use Team components from Tail-Kit

    main

    Tail-Kit provides several pre-built Team section components for TailwindCSS. These components can be used to display individual team members or entire teams in various layouts (simple, shadow, multiple, or big teams).

    import SimpleTeam from '../../../components/kit/components/pagesection/team/SimpleTeam';
import SimpleTeams from '../../../components/kit/components/pagesection/team/SimpleTeams';
import ShadowTeam from '../../../components/kit/components/pagesection/team/ShadowTeam';
import ShadowTeams from '../../../components/kit/components/pagesection/team/ShadowTeams';
import AllTeam from '../../../components/kit/components/pagesection/team/AllTeam';
import DoubleTeam from '../../../components/kit/components/pagesection/team/DoubleTeam';

// Example: Single member with SimpleTeam
<SimpleTeam
    img="/images/person/1.jpg"
    name="Patrick Sebastien"
    job="Developpeur"
    desc="Patrick Sébastien, born November 14, 1953 in Brive-la-Gaillarde..."
    size="monster"
/>

// Example: Using collection components
<SimpleTeams />
<ShadowTeams />
<AllTeam />
<DoubleTeam />

  9. Use Profile components from Tail-Kit

    main

    Tail-Kit provides several specialized profile and team card components for TailwindCSS. These components can be used to build user profiles, team member sections, or social cards.

    Available components include:

    • SimpleProfile: A basic profile card. Supports horizontal (boolean) and withAction (boolean) props.
    • CoverAndButtonsProfilCard: A profile card featuring a cover image and action buttons.
    • HeadProfil: A header-style profile component.
    • AddProfilInfo: A component designed for adding or displaying profile information.
    • CoverAndInfoProfil: A profile component combining a cover image with detailed information.
    • FullPhotoCard: A profile card focused on a full-sized photo.

  10. Configure Tailwind CSS for Tail-Kit components

    main

    Some Tail-Kit components require specific overrides in your tailwind.config.js to function correctly. Components requiring these changes are marked with a specific icon in the documentation.

    To ensure all Tail-Kit components work as expected, use the following configuration structure in your tailwind.config.js file:

    module.exports = {
  important: true,
  // Active dark mode on class basis
  darkMode: "class",
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  },
  purge: {
    content: ["./pages/**/*.tsx", "./components/**/*.tsx"],
    // These options are passed through directly to PurgeCSS
  },
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        check: "url('/icons/check.svg')",
        landscape: "url('/images/landscape/2.jpg')",
      }),
    },
  },
  variants: {
    extend: {
      backgroundColor: ["checked"],
      borderColor: ["checked"],
      inset: ["checked"],
      zIndex: ["hover", "active"],
    },
  },
  plugins: [],
  future: {
    purgeLayersByDefault: true,
  },
};

  11. ComponentLayout props reference

    main

    The ComponentLayout component accepts the following props to configure the preview and documentation interface:

    propNamepropTypedefaultValueisRequired
    elementJSX.ElementYes
    componentYes
    titlestringYes
    jsLinkstringNo
    needConfigurationbooleanfalseNo
    verticalbooleanfalseNo
    showSwitchModebooleanfalseNo
    containerClassesstringNo

    Prop Descriptions

    • element: The JSX element to be rendered in the preview.
    • component: The component reference.
    • title: The title displayed on the component panel.
    • jsLink: A link to the component's source code on GitHub (useful if the component requires external JS).
    • needConfiguration: Set to true if the component requires a custom Tailwind configuration.
    • vertical: If true, the code preview is displayed to the side of the component instead of below it.
    • showSwitchMode: If true, displays the dark/light mode toggle checkbox.
    • containerClasses: CSS classes to apply to the component's container (e.g., for adding margins or padding).
    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;"},{

  12. Use Natural landing page templates

    main

    Tail-Kit provides several 'Natural' landing page templates that can be integrated into React applications. These templates are designed to be used within a layout component like ComponentLayout or directly as page elements.

    Available templates include:

    • NaturalHome: A standard natural landing page.
    • Natural2Home: An alternative natural landing page layout.
    • Natural3Home: A natural landing page layout (supports withPub prop in certain contexts).
    import NaturalHome from '../../../components/kit/templates/homePages/simplePage/NaturalHome';
import Natural2Home from '../../../components/kit/templates/homePages/simplePage/Natural2Home';
import Natural3Home from '../../../components/kit/templates/homePages/simplePage/Natural3Home';

// Usage within a component layout
<ComponentLayout
    vertical={true}
    title="Natural landing page"
    element={<NaturalHome />}
    component={NaturalHome}
/>