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>;
Breadcrumb
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
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
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>
Modal
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
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
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