Introduction

TailGrids React

Introduction

This part of the documentation covers everything you need to know to start a React project with TailGrids. This version of TailGrids is based on TailGrids Core (open-source), which was developed specifically for React, so anyone can use TailGrids Components with their React projects flawlessly.

🌟🌟🌟 Star This Repository on GitHub

Adding TailGrids to React Project

To be able to use TailGrids with your React project, first you’ll have to install it using NPM.

You can install TailGrids easily using this command:

npm i tailgrids-react

Using Components

To use any of the components first you’ll have to import them from tailgrids-react.

Here’s how you can import a Button component from tailgrids-react.

We’ve also provided examples of how each Component will work. You can find all the examples below:

import {Button} from 'tailgrids-react'

We tried to make all of our components highly dynamic, so all of our components accept the required props.

About1 Section

About1 component accepts image1, image2, image3, subtitle, title, description, buttonText props. First three props are for left images and rest of props are for right side content. Here is an example:

import { About1 } from "tailgrids-react";
<About
  image1="https://i.ibb.co/gFb3ns6/image-1.jpg"
  image2=" https://i.ibb.co/rfHFq15/image-2.jpgs"
  image3="https://i.ibb.co/9y7nYCD/image-3.jpgs"
  subtitle="Why Choose Us"
  title="Make your customers happy by giving service."
  description="It is a long established fact that a reader will be distracted by the readable content."
  buttonText="Get Started"
/>;

Alerts

Alerts Component accepts type, borderLeft, background, dismissible, title, body props.

type props for defining the type of alerts is it for success, warning or error.

borderLeft and background props are for styling.

dismissible for allows the alert dismiss button.

title and body for content of alerts.

import { Alerts } from "tailgrids-react";
<Alerts
  type="warning"
  borderLeft
  background
  dismissible
  title="Attention needed"
  body="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard"
/>;

Badge

Badge accepts label, roundedMd, roundedFull, outline, primary, secondary, dark, gray, light, warning, danger, success and info props.

label props for badge's label.

roundedMd, roundedFull and outline props are for styling the badge.

primary, secondary, dark, gray, light, warning, danger, success and info props are for defining the type of Badge.

Here are a few examples:

import {Badge} from 'tailgrids-react'

<Badge label="Primary" primary roundedMd />
<Badge secondary label="Secondary" roundedFull />
<Badge dark label="Dark" roundedMd />
<Badge gray label="Gray" roundedMd />
<Badge light label="Light" roundedMd />
<Badge warning label="Warning" roundedMd />
<Badge danger label="Danger" roundedMd />
<Badge success label="Success" roundedMd />
<Badge info label="Info" roundedMd />

Blog

As our main component design contains section titles with BlogCard. We create them separately. So, Import the the Blog, BlogCard, BlogSectionTitle from tailgrids-react and keep using.

Blog's example with BlogSectionTitle and BlogCard:

import them from tailgrids-react.

import {Blog, BlogCard, BlogSectionTitle} from 'tailgrids-react'

<Blog>
  <BlogSectionTitle
    subtitle="Our Blogs"
    title=" Our Recent News"
    blogDescription="There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some form."
  />
  <BlogCard
    date="Dec 22, 2023"
    CardTitle="Meet AutoManage, the best AI management tools"
    CardDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    image="https://i.ibb.co/Cnwd4q6/image-01.jpg"
  />
  <BlogCard
    date="Dec 22, 2023"
    CardTitle="Meet AutoManage, the best AI management tools"
    CardDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    image="https://i.ibb.co/Y23YC07/image-02.jpg"
  />
  <BlogCard
    date="Dec 22, 2023"
    CardTitle="Meet AutoManage, the best AI management tools"
    CardDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    image="https://i.ibb.co/7jdcnwn/image-03.jpg"
  />
</Blog>

Brand

import Brand and BrandImage and keep using. BrandImage accepts href, alt and imgSrc props.

import { Brand, BrandImage } from "tailgrids-react";
<Brand>
  <BrandImage
    href="#"
    alt="Brand Image"
    imgSrc="https://cdn.tailgrids.com/1.0/assets/images/brands/graygrids.svg"
  />
  <BrandImage
    href="#"
    alt="Brand Image"
    imgSrc="https://cdn.tailgrids.com/1.0/assets/images/brands/lineicons.svg"
  />
  <BrandImage
    href="#"
    alt="Brand Image"
    imgSrc="https://cdn.tailgrids.com/1.0/assets/images/brands/uideck.svg"
  />
  <BrandImage
    href="#"
    alt="Brand Image"
    imgSrc="https://cdn.tailgrids.com/1.0/assets/images/brands/ayroui.svg"
  />
</Brand>;

import Breadcrumb, BreadcrumbLink from tailgrids-react. then keep exploring them.

Breadcrumb accepts theme, round and center props. theme for styling background and borders. round for corner radius value and center for placing the Breadcrumb at center position.

BreadcrumbLink accepts path, arrow, color, homeIcon, slash, hover, arrow1, iconsColor props.

path for passing BreadcrumbLink link. arrow, arrow1 and slash for enabling arrow or slash between two links. homeIcon for showing homeIcon.

import { Breadcrumb, BreadcrumbLink } from "tailgrids-react";

<Breadcrumb round="lg">
  <BreadcrumbLink path="Home" arrow hover="dark" />
  <BreadcrumbLink path="Project" arrow color="body-color" />
  <BreadcrumbLink path="Marketing" color="body-color" />
</Breadcrumb>;

Button

Button component's props list:

roundedFull, roundedLg, roundedNone, roundedSm, roundedMd these are for border-radius styling. label as Button's text. color as background-color, secondary, gray, dark, warning, danger, success, info these are for button's variations. outline props for outline button.

import { Button } from "tailgrids-react";

<div className="space-x-4 space-y-6">
  <Button label="Get Started" />
  <Button color="secondary" label="Get Started" />
  <Button color="dark" label="Get Started" />
  <Button roundedLg label="Get Started" />
  <Button roundedLg color="secondary" label="Get Started" />
  <Button roundedLg color="dark" label="Get Started" />
</div>;

Button Group

TailGrids support three types of buttons on button group. Button Group accepts roundedFull, roundedLg, roundedNone, roundedSm, roundedMd these are for border-radius styling. withIcon is for enabling icons. secondary, gray, dark, warning, danger, success, info are for defining type of button group. button1, button2, button3 are for each button's text.

import { ButtonGroup } from "tailgrids-react";

<ButtonGroup primary button1="About" button2="Profile" button3="Service" />;

Card

Card component accepts image, CartTitle, titleHref, CardDescription and Button props. All of them are self introductory.

import {Card} frm 'tailgrids-react';

<Card
  image="https://i.ibb.co/r2zns1m/image-01.jpg"
  CartTitle=" Creative Card Component designs graphic elements"
  titleHref='#'
  CardDescription=" Lorem ipsum dolor sit amet pretium consectetur adipiscing elit. Lorem consectetur adipiscing elit."
  Button="View Details"
  btnHref='#'
/>

Contact

Just import them form tailgrids-react copy-paste and explore them.

import {
  ContactContent,
  Contact,
  ContactInputBox,
  ContactTextArea,
  ContactSubmitButton,
} from "tailgrids-react";

const ContactSection = () => {
  return (
    <section class="relative z-10 overflow-hidden bg-white py-20 lg:py-[120px]">
      <div className="container">
        <div className="-mx-4 flex flex-wrap lg:justify-between">
          <ContactContent
            subtitle="Contact Us"
            title="GET IN TOUCH WITH US"
            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius tempor incididunt ut labore e dolore magna aliqua."
            address="99 S.t Jomblo Park Pekanbaru 28292. Indonesia"
            number="(+62)81 414 257 9980"
            emailAddress="info@yourdomain.com"
          />
          <Contact>
            <ContactInputBox type="text" name="name" placeholder="Your Name" />
            <ContactInputBox
              type="text"
              name="email"
              placeholder="Your Email"
            />
            <ContactInputBox
              type="text"
              name="phone"
              placeholder="Your Phone"
            />
            <ContactTextArea
              row="6"
              placeholder="Your Message"
              name="details"
              defaultValue=""
            />
            <ContactSubmitButton type="submit">
              Send Message
            </ContactSubmitButton>
          </Contact>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;

Cookies1

Cookies1 component accepts title and description props. title for heading title. and description for cookies description.

import { Cookies1 } from "tailgrids-react";

<Cookies1
  title="We use cookies"
  description="Please, accept these sweeties to continue enjoying our site!"
/>;

Cookies2

Cookies2 allows to pass a buttonText as button's text. and also allows to pass titleRef as title's link.

import { Cookies2 } from "tailgrids-react";

<Cookies2
  details="This website uses cookies to ensure you get the best experience on our website."
  title="Cookie Policies"
  titleRef="#"
  buttonText="Accepts Cookies"
/>;

Cookies4

Cookies4 is a popup modal. its accepts color, theme, title and description props.

color for modals background-color. theme for theme variation. title and description are self introductory.

import { Cookies4 } from "tailgrids-react";

<Cookies4
  color="white"
  theme="info"
  title="We use Cookies"
  description="Lorem ipsum, dolor sit amet consectetur adipisicing elit."
/>;

Cta (Call To Action)

Cta component accepts bgColor, subTitle, title, primaryButtonLink, secondaryButtonLink, primaryButton and secondaryButton props. All of them are self-introductory.

import { Cta } from "tailgrids-react";

<Cta
  bgColor="primary"
  subtitle="Find Your Next Dream App"
  title="Get started with our free trial"
  primaryButtonLink="#"
  secondaryButtonLink="#"
  primaryButton="Get Pro Version"
  secondaryButton="Start Free Trial"
/>;

Dropdown components allows to pass Button, bgColor, dropColor props.

Button is for Dropdown's label text. bgColor for dropdown button's background-color and dropColor for dropdown's background-color.

DropdownItem accepts label props for DropdownItem's label, and href for link.

import { Dropdown, DropdownItem } from "tailgrids-react";

<Dropdown bgColor="warning" dropColor="white" Button="Dropdown Button">
  <DropdownItem href="#" label="Dashboard" />
  <DropdownItem href="#" label="Preview" />
  <DropdownItem href="#" label="Button" />
  <DropdownItem href="#" label="Subscribe" />
</Dropdown>;

Error

Error Components accepts title, details, button and buttonHref props. All of them are self-introductory

import { Error } from "tailgrids-react";

<Error
  title=" Oops! That page can't be found"
  details="The page you are looking for it maybe deleted"
  button="Go to Home"
  buttonHref="/#"
/>;

Faq

FaqHeader for section title. It's allows to pass subtitle, title and description props.

Accordion accepts title and description props. note: title will be clickable.

import { FaqHeader, Faq, Accordion } from "tailgrids-react";

<section className="container mt-28">
  <FaqHeader
    subtitle="FAQ"
    title="Any Questions? Look Here"
    description=" There are many variations of passages of Lorem Ipsum available but
    the majority have suffered alteration in some form."
  />
  <Faq>
    <Accordion
      title="How Long we deliver your first blog post?"
      description="It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of your monthly content marketing."
    />
    <Accordion
      title="How Long we deliver your first blog post?"
      description="It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of your monthly content marketing."
    />
    <Accordion
      title="How Long we deliver your first blog post?"
      description="It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of your monthly content marketing."
    />
    <Accordion
      title="How Long we deliver your first blog post?"
      description="It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of your monthly content marketing."
    />
  </Faq>
</section>;

Footer component allows to pass below props. logo for footer's logo. description for short description. phone for phone number, linkedinLink, youtubeLink, twitterLink, facebookLink these are for social links, copyright for copyright text.

FooterLinkGroup accepts header props for footer-widget title.

FooterNavLink accepts href props for link.

import { Footer, FooterLinkGroup, FooterNavLink } from "tailgrids-react";

<Footer
  logo="https://cdn.tailgrids.com/1.0/assets/images/logo/logo.svg"
  description="Sed ut perspiciatis undmnis is iste natus error sit amet voluptatem totam rem aperiam."
  phone="+012 (345) 678 99"
  copyright="© 2025 TailGrids"
  facebookLink="/#"
  twitterLink="/#"
  youtubeLink="/#"
  linkedinLink="/#"
>
  <FooterLinkGroup header="Resources">
    <FooterNavLink href="/sass">SaaS Development</FooterNavLink>
    <FooterNavLink href="/#">Our Products</FooterNavLink>
    <FooterNavLink href="/#">User Flow</FooterNavLink>
    <FooterNavLink href="/#">User Strategy</FooterNavLink>
  </FooterLinkGroup>
  <FooterLinkGroup header="Company">
    <FooterNavLink href="/sass">About TailGrids</FooterNavLink>
    <FooterNavLink href="/#">Contact & Support</FooterNavLink>
    <FooterNavLink href="/#">Success History</FooterNavLink>
    <FooterNavLink href="/#">Setting & Privacy</FooterNavLink>
  </FooterLinkGroup>
  <FooterLinkGroup header="Quick Links">
    <FooterNavLink href="/sass">Premium Support</FooterNavLink>
    <FooterNavLink href="/#">Our Service</FooterNavLink>
    <FooterNavLink href="/#">Know Our Team</FooterNavLink>
    <FooterNavLink href="/#">Download App</FooterNavLink>
  </FooterLinkGroup>
</Footer>;

FormElement

FormElement component allows to pass below props.

level props for label. active, disabled for inputs state. theme for styling, placeholder for placeholder, defaultValue for default value, input, textArea, fileInput, select are for defining for field type. rows for defining textarea's rows.

import { FormElement } from "tailgrids-react";

<FormElement input placeholder="Default Input" level="Default Input" />;

Forms

Forms Component designed for signin form box. Forms accepts some props. logoHref for logo, facebookSrc, TwitterSrc, GoogleSrc, are for social auth link. SignUp for signup page link.

import { Forms, FormsInputBox } from "tailgrids-react";

<Forms
  facebookSrc="/#"
  TwitterSrc="/#"
  GoogleSrc="/#"
  SignUp="/signup"
  logoHref="https://cdn.tailgrids.com/1.0/assets/images/logo/logo.svg"
>
  <FormsInputBox type="text" placeholder="Email" name="email" defaultValue="" />
  <FormsInputBox
    type="password"
    placeholder="password"
    name="password"
    defaultValue=""
  />
  <FormsInputBox
    bgColor="primary"
    type="submit"
    placeholder="password"
    name="password"
    defaultValue="Login "
  />
</Forms>;

Hero

Hero component accepts below props. title, description, buttonText, Btn2Text, imgSrc all of them are self-introductory.

As Navbar, Brand and BrandImage are describe before we don't repeat again.

import {Navbar, Hero, Brand, BrandImage} from 'tailgrids-react';

<Navbar
  button1="Login"
  button2="Sign up"
  logoSrc="https://cdn.tailgrids.com/1.0/assets/images/logo/logo.svg"
>
  <NavbarListItem href="/#">Home</NavbarListItem>
  <NavbarListItem href="/#">Payment</NavbarListItem>
  <NavbarListItem href="/#">About</NavbarListItem>
  <NavbarListItem href="/#">Blog</NavbarListItem>
</Navbar>
<Hero
  title="Kickstart Startup Website with TailGrids"
  description="With TailGrids, business and students thrive together. Business can perfectly match their staffing."
  buttonText="Get Started"
  Btn2Text="Download App"
  imgSrc="https://cdn.tailgrids.com/1.0/assets/images/hero/hero-image-01.png"
>
  <Brand>
    <div className="flex flex-wrap space-y-5">
      <BrandImage
        href="#"
        alt="alt text"
        imgSrc="https://cdn.tailgrids.com/1.0/assets/images/brands/graygrids.svg"
      />

      <BrandImage
        href="#"
        alt="alt text"
        imgSrc="https://cdn.tailgrids.com/1.0/assets/images/brands/lineicons.svg"
      />

      <BrandImage
        href="#"
        alt="alt text"
        imgSrc="https://cdn.tailgrids.com/1.0/assets/images/brands/uideck.svg"
      />
    </div>
  </Brand>
</Hero>

List

roundedFull, roundedLg, roundedNone, roundedSm, roundedMd are for border-radius styling.

secondary, gray, dark, warning, danger, success, info, are for color variations.

rotate list border's style. basic is for basic list style, OkaySign is for okay-sign as list style, crossIcon is for cross-icon as list style, arrow is for arrow-icon as list style, star is for star-icon as list style, count is for defining list count.

import {List} from 'tailgrids-react';

<List basic success roundedFull count="1">
  Lorem ipsum dolor sit amet
</List>
<List basic danger roundedFull count="2">
  Lorem ipsum dolor sit amet
</List>
<List basic info roundedFull count="3">
  Lorem ipsum dolor sit amet
</List>
<List basic warning roundedFull count="4">
  Lorem ipsum dolor sit amet
</List>
<List basic dark roundedFull count="5">
  Lorem ipsum dolor sit amet
</List>

ModalBody accepts below props. modalOpen and setModalOpen for handing modal state, ModalViewDetails for view-details button text, viewDetailsSrc for view-details button link, modalClose for modal close button text, modalBody, for modal body text, modalTitle for modal title text, theme for color variation,

setting state for handling modal. const [modalOpen, setModalOpen] = useState(false);

define a button for modal. and call the function.

<button
  onClick={() => setModalOpen(true)}
  className={`rounded-full bg-primary px-6 py-3 text-base font-medium text-white`}
>
  Open Modal
</button>

import React, { useState } from "react";
import { ModalBody } from "tailgrids-react";
<ModalBody
  theme="primary"
  modalTitle="Your Message Sent Successfully"
  modalBody="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  modalClose="Cancel"
  ModalViewDetails="View Details"
  viewDetailsSrc="#"
  setModalOpen={setModalOpen}
  modalOpen={modalOpen}
/>;

Navbar accepts below props.

logoSrc for navbar logo. button1, button2 for right's button. NavbarListItem accepts href props for passing link.

import { Navbar, NavbarListItem } from "tailgrids-react";

<Navbar
  button1="Login"
  button2="Sign up"
  logoSrc="https://cdn.tailgrids.com/1.0/assets/images/logo/logo.svg"
>
  <NavbarListItem href="/#">Home</NavbarListItem>
  <NavbarListItem href="/#">Payment</NavbarListItem>
  <NavbarListItem href="/#">About</NavbarListItem>
  <NavbarListItem href="/#">Blog</NavbarListItem>
</Navbar>;

Pagination

Pagination accepts color props for color variation.

PageLink accepts color, count and pageSrc props. color for variations. count for page number. and pageSrc for page's link.

import { Pagination, PageLink } from "tailgrids-react";

<Pagination color="primary">
  <PageLink color="primary" count="1" pageSrc="/#" />
  <PageLink color="primary" count="2" pageSrc="/#" />
  <PageLink color="primary" count="3" pageSrc="/#" />
  <PageLink color="primary" count="4" pageSrc="/#" />
  <PageLink color="primary" count="5" pageSrc="/#" />
  <PageLink color="primary" count="6" pageSrc="/#" />
</Pagination>;

Portfolio

PortfolioHeader Component for section title. It's accepts subtitle, title and description props. all are self-introductory.

PortfolioCard component accepts below props.

ImageSrc for portfolio image. category for category. title for portfolio title. button for button text. buttonHref for button link. showCard for handing filter.

import { PortfolioHeader, Portfolio, PortfolioCard } from "tailgrids-react";

<section className="pt-20 pb-12 lg:pt-[120px] lg:pb-[90px]">
  <div className="container">
    <PortfolioHeader
      subtitle="Our Portfolio"
      title=" Our Recent Projects"
      description="There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration."
    />
    <Portfolio>
      <div className="-mx-4 flex flex-wrap justify-center">
        <div className="w-full px-4">
          <ul className="mb-12 flex flex-wrap justify-center space-x-1">
            <li className="mb-1">
              <button
                onClick={() => handleProject("all")}
                className={`inline-block rounded-lg py-2 px-5 text-center text-base font-semibold transition md:py-3 lg:px-8 ${
                  showCard === "all" ? "bg-primary text-white" : ""
                }`}
              >
                All Projects
              </button>
            </li>
            <li className="mb-1">
              <button
                onClick={() => handleProject("branding")}
                className={`inline-block  rounded-lg py-2 px-5 text-center text-base font-semibold transition md:py-3 lg:px-8 ${
                  showCard === "branding" ? "bg-primary text-white" : ""
                }`}
              >
                Branding
              </button>
            </li>
            <li className="mb-1">
              <button
                onClick={() => handleProject("design")}
                className={`inline-block rounded-lg py-2 px-5 text-center text-base font-semibold transition md:py-3 lg:px-8 ${
                  showCard === "design" ? "bg-primary text-white" : ""
                }`}
              >
                Design
              </button>
            </li>
            <li className="mb-1">
              <button
                onClick={() => handleProject("marketing")}
                className={`inline-block rounded-lg py-2 px-5 text-center text-base font-semibold transition md:py-3 lg:px-8 ${
                  showCard === "marketing" ? "bg-primary text-white" : ""
                }`}
              >
                Marketing
              </button>
            </li>
            <li className="mb-1">
              <button
                onClick={() => handleProject("development")}
                className={`inline-block rounded-lg py-2 px-5 text-center text-base font-semibold transition md:py-3 lg:px-8 ${
                  showCard === "development" ? "bg-primary text-white" : ""
                }`}
              >
                Development
              </button>
            </li>
          </ul>
        </div>
      </div>

      <PortfolioCard
        ImageSrc="https://i.ibb.co/64WfFPt/image-01.jpg"
        category="Branding"
        title="Creative Agency"
        button="View Details"
        buttonHref="#"
        showCard={showCard}
      />
      <PortfolioCard
        ImageSrc="https://i.ibb.co/PT7ghRs/image-06.jpg"
        category="marketing"
        title="Creative Agency"
        button="View Details"
        buttonHref="#"
        showCard={showCard}
      />
      <PortfolioCard
        ImageSrc="https://i.ibb.co/vkt8C1P/image-02.jpg"
        category="marketing"
        title="Creative Agency"
        button="View Details"
        buttonHref="#"
        showCard={showCard}
      />
      <PortfolioCard
        ImageSrc="https://i.ibb.co/3FKqS1G/image-03.jpg"
        category="Development"
        title="Creative Agency"
        button="View Details"
        buttonHref="#"
        showCard={showCard}
      />
      <PortfolioCard
        ImageSrc="https://i.ibb.co/m6dq2fX/image-04.jpg"
        category="Design"
        title="Creative Agency"
        button="View Details"
        buttonHref="#"
        showCard={showCard}
      />
      <PortfolioCard
        ImageSrc="https://i.ibb.co/mCPjBsH/image-05.jpg"
        category="Marketing"
        title="Creative Agency"
        button="View Details"
        buttonHref="#"
        showCard={showCard}
      />
    </Portfolio>
  </div>
</section>;

Pricing

PricingTitle accepts subTitle, title, description props. all of them are self-introductory.

PricingCard accepts below props. type for defining package type, price for package price, subscription for package duration, description for short description, button for PricingCard button text.

import {
  Pricing,
  PricingTitle,
  PricingCard,
  PricingList,
} from "tailgrids-react";

<Pricing>
  <div className="container">
    <PricingTitle
      subTitle="Pricing Table"
      title="Our Pricing Plan"
      description="There are many variations of passages of Lorem Ipsum available but the majority alteration in some form."
    />
  </div>
  <PricingCard
    type="Personal"
    price="$59"
    subscription="year"
    description="Perfect for using in a personal website or a client project."
    button="Choose Personal"
  >
    <PricingList>1 User</PricingList>
    <PricingList>All UI components</PricingList>
    <PricingList>Lifetime access</PricingList>
    <PricingList>Free updates</PricingList>
    <PricingList>Use on 1 (one) project</PricingList>
    <PricingList>3 Months support</PricingList>
  </PricingCard>
  <PricingCard
    type="Business"
    price="$199"
    subscription="year"
    description="Perfect for using in a personal website or a client project."
    button="Choose Business"
    active
  >
    <PricingList>5 User</PricingList>
    <PricingList>All UI components</PricingList>
    <PricingList>Lifetime access</PricingList>
    <PricingList>Free updates</PricingList>
    <PricingList>Use on31 (Three) project</PricingList>
    <PricingList>4 Months support</PricingList>
  </PricingCard>
  <PricingCard
    type="Professional"
    price="$256"
    subscription="year"
    description="Perfect for using in a personal website or a client project."
    button="Choose Professional"
  >
    <PricingList>Unlimited User</PricingList>
    <PricingList>All UI components</PricingList>
    <PricingList>Lifetime access</PricingList>
    <PricingList>Free updates</PricingList>
    <PricingList>Unlimited project</PricingList>
    <PricingList>12 Months support</PricingList>
  </PricingCard>
</Pricing>;

Progress

Progress Component accepts below props.

primary, secondary, warning, danger, success, info, are for variations.

ShowValue for showing progress value, ShowValueInside for showing progress value inside the progress-bar, value for progress value. default value is 50.

import { Progress } from "tailgrids-react";

<Progress success ShowValue value="90" />;

Service

Service Component accepts below props.

subtitle, title, and description are self-introductory. they are for service section-title.

ServiceCard component accepts title, details and icon props. all of them are self-introductory.

import { Service, ServiceCard } from "tailgrids-react";

<Service
  subtitle="Our Service"
  title="What We Offer"
  description="There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some form"
>
  <ServiceCard
    title="Refreshing Design"
    details="We dejoy working with discerning clients, people for whom qualuty, service, integrity & aesthetics."
    icon={icon}
  />
  {/*  */}
  <ServiceCard
    title="Based on Tailwind CSS"
    details="We dejoy working with discerning clients, people for whom qualuty, service, integrity & aesthetics."
    icon={icon}
  />
  <ServiceCard
    title="Refreshing Design"
    details="We dejoy working with discerning clients, people for whom qualuty, service, integrity & aesthetics."
    icon={icon}
  />
  <ServiceCard
    title="Refreshing Design"
    details="We dejoy working with discerning clients, people for whom qualuty, service, integrity & aesthetics."
    icon={icon}
  />
  <ServiceCard
    title="Refreshing Design"
    details="We dejoy working with discerning clients, people for whom qualuty, service, integrity & aesthetics."
    icon={icon}
  />
  <ServiceCard
    title="Refreshing Design"
    details="We dejoy working with discerning clients, people for whom qualuty, service, integrity & aesthetics."
    icon={icon}
  />
</Service>;

Switch and Checkbox

Switch accepts togglePrimary, toggleSecondary, toggleThree, toggleFour, toggleFive, toggleSix, toggleSeven, toggleEight, toggleNine these props for Switches variation.

Checkbox component accepts checkboxLabelOne, checkboxLabelTwo, checkboxLabelThree, checkboxLabelFour, checkboxLabelFive, these props for Checkbox design variation. and text props for checkbox's label.

import {Switch, Checkbox} from 'tailgrids-react';

<Switch togglePrimary />
<Switch toggleSecondary />
<Switch toggleThree />
<Switch toggleFour />
<Switch toggleFive />
<Switch toggleSix />
<Switch toggleSeven />
<Switch toggleEight />
<Switch toggleNine />
<Checkbox text="checked" checkboxLabelOne />
<Checkbox text="checked" checkboxLabelTwo />
<Checkbox text="checked" checkboxLabelThree />
<Checkbox text="checked" checkboxLabelFour />
<Checkbox text="checked" checkboxLabelFive />

Tab

Set these state and handler for handling tabs

const [open, setOpen] = useState("home");

const handleTabOpen = (tabCategory) => {
  setOpen(tabCategory);
};

TabContent accepts details, tabCategory and open props. details for tab's content. tabCategory for

import { Tab, TabContent } from "tailgrids-react";

<section className="py-20 lg:py-[120px]">
  <div className="container">
    <Tab>
      <div className="flex flex-wrap space-x-2 rounded-lg border border-[#E4E4E4] py-3 px-4">
        <a
          onClick={() => handleTabOpen("home")}
          className={`cursor-pointer rounded-md py-3 px-4 text-sm font-medium transition-all delay-75 hover:bg-blue-500 md:text-base lg:px-6 ${
            open === "home" ? "bg-primary text-white" : ""
          }`}
        >
          Home
        </a>
        <a
          onClick={() => handleTabOpen("about")}
          className={`cursor-pointer rounded-md py-3 px-4 text-sm font-medium transition-all delay-75 hover:bg-blue-500 md:text-base lg:px-6 ${
            open === "about" ? "bg-primary text-white" : ""
          }`}
        >
          About Us
        </a>
        <a
          onClick={() => handleTabOpen("team")}
          className={`cursor-pointer rounded-md py-3 px-4 text-sm font-medium transition-all delay-75 hover:bg-blue-500 md:text-base lg:px-6 ${
            open === "team" ? "bg-primary text-white" : ""
          }`}
        >
          Our Team
        </a>
        <a
          onClick={() => handleTabOpen("company")}
          className={`cursor-pointer rounded-md py-3 px-4 text-sm font-medium transition-all delay-75 hover:bg-blue-500 md:text-base lg:px-6 ${
            open === "company" ? "bg-primary text-white" : ""
          }`}
        >
          Company Details
        </a>
      </div>
      <TabContent
        details=" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque."
        tabCategory="home"
        open={open}
      />
      <TabContent
        details=" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque harum vero! "
        tabCategory="about"
        open={open}
      />
      <TabContent
        details="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque.

        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit mollitia nam eligendi reprehenderit reiciendis saepe laboriosam."
        tabCategory="team"
        open={open}
      />
      <TabContent
        details="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque."
        tabCategory="company"
        open={open}
      />
    </Tab>
  </div>
</section>;

Table

Table Component accepts TableHead, TableBody props. TableHead for Table Header, and TableBody for table body. also import TdStyle for styling table-data and table-heading.

import { Table, TableHead, TableBody, TdStyle } from "tailgrids-react";

<section className="bg-white py-20">
  <div className="container">
    <Table
      TableHead={
        <TableHead>
          <th className={TdStyle.ThStyle}> TDH </th>
          <th className={TdStyle.ThStyle}> Duration </th>
          <th className={TdStyle.ThStyle}> Registration </th>
          <th className={TdStyle.ThStyle}> Renewal </th>
          <th className={TdStyle.ThStyle}> Transfer </th>
          <th className={TdStyle.ThStyle}> Register </th>
        </TableHead>
      }
      TableBody={
        <TableBody>
          <tr>
            <td className={TdStyle.TdStyle}>.com</td>
            <td className={TdStyle.TdStyle}>1 Year</td>
            <td className={TdStyle.TdStyle}>$75.00</td>
            <td className={TdStyle.TdStyle}>$5.00</td>
            <td className={TdStyle.TdStyle}>$10.00</td>
            <td className={TdStyle.TdStyle}>
              <a href="/#" className={TdStyle.TdButton}>
                Sign Up
              </a>
            </td>
          </tr>
          <tr>
            <td className={TdStyle.TdStyle}>.com</td>
            <td className={TdStyle.TdStyle}>1 Year</td>
            <td className={TdStyle.TdStyle}>$75.00</td>
            <td className={TdStyle.TdStyle}>$5.00</td>
            <td className={TdStyle.TdStyle}>$10.00</td>
            <td className={TdStyle.TdStyle}>
              <a href="/#" className={TdStyle.TdButton}>
                Sign Up
              </a>
            </td>
          </tr>
          <tr>
            <td className={TdStyle.TdStyle}>.com</td>
            <td className={TdStyle.TdStyle}>1 Year</td>
            <td className={TdStyle.TdStyle}>$75.00</td>
            <td className={TdStyle.TdStyle}>$5.00</td>
            <td className={TdStyle.TdStyle}>$10.00</td>
            <td className={TdStyle.TdStyle}>
              <a href="/#" className={TdStyle.TdButton}>
                Sign Up
              </a>
            </td>
          </tr>
          <tr>
            <td className={TdStyle.TdStyle}>.com</td>
            <td className={TdStyle.TdStyle}>1 Year</td>
            <td className={TdStyle.TdStyle}>$75.00</td>
            <td className={TdStyle.TdStyle}>$5.00</td>
            <td className={TdStyle.TdStyle}>$10.00</td>
            <td className={TdStyle.TdStyle}>
              <a href="/#" className={TdStyle.TdButton}>
                Sign Up
              </a>
            </td>
          </tr>
        </TableBody>
      }
    ></Table>
  </div>
</section>;

Team

Team component accepts subtitle, title and description props for section-title.

TeamCard component accepts name, profession and imageSrc props. all of them are self-introductory.

import { Team, TeamCard } from "tailgrids-react";

<div className="container mt-28">
  <Team
    subtitle="Our Team"
    title="Our Awesome Team"
    description="There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some form."
  >
    <TeamCard
      name="Coriss Ambady"
      profession="Web Developer"
      imageSrc="https://i.ibb.co/T1J9LD4/image-03-2.jpg"
    />
    <TeamCard
      name="Coriss Ambady"
      profession="Web Developer"
      imageSrc="https://i.ibb.co/8P6cvVy/image-01-1.jpg"
    />
    <TeamCard
      name="Coriss Ambady"
      profession="Web Developer"
      imageSrc="https://i.ibb.co/30tGtjP/image-04.jpg"
    />
    <TeamCard
      name="Coriss Ambady"
      profession="Web Developer"
      imageSrc="https://i.ibb.co/yVVT0Dp/image-02-2.jpg"
    />
  </Team>
</div>;

Tooltip component accepts below props. position for defining tooltips placement. tooltipsText for tooltips label. primary, secondary, gray, dark, warning, danger, success, info are for tooltips variation.

import {Tooltip} from 'tailgrids-react';

<Tooltip position="bottom" primary tooltipsText="ToolTip Text">
  ToolTip On Bottom
</Tooltip>
<Tooltip position="top" dark tooltipsText="ToolTip Text">
  ToolTip On Top
</Tooltip>

Video

Video component accepts below props. bgImageHref for background-image. iframeHref for iframe's video link.

primary, secondary, warning, danger, success, info are for defining color variation.

import { Video } from "tailgrids-react";

<div className="container my-28 space-y-12">
  <Video
    primary
    bgImageHref="https://i.ibb.co/KbSwcWJ/image-01-1.jpg"
    iframeHref="https://www.youtube.com/embed/LXb3EKWsInQ?autoplay=1&mute=1"
  />
</div>;

👥 Community

💬 Chat Us on Discord

🙌 Let's Connect on Twitter

💙 Support

You can always support this project and inspire us by 🌟🌟🌟 Starring This Repository on GitHub and sharing with friends. If you like the the library consider purchasing ⚡ TailGrids Pro to get access to all available premium components.

Contribute

If you find something can be improved feel free to reach out or open a pull request on GitHub