tailwind-admin — 3 React Components, Preview & Copy | 21st

tailwind-admin

by tailwind-admin

3components3.7Kviews12bookmarks

Installs all 102 components. Without our CLI, run instead.

Auto-indexed

Signup Form Split

Elastic Slider Motion

Animate Table Motion

That's all 3 components

About tailwind-admin

tailwind-admin publishes a shadcn registry at tailwind-admin.com, with 102 components installable through the shadcn CLI.

Components: 102
GitHub stars: 270
Last commit: May 26, 2026
Repository: Tailwind-Admin/free-tailwind-admin-dashboard-template

Also in the tailwind-admin registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

action-tracking-motion
A Card component with action tracking animation.
framer-motion1 file
alert-card-motion
A Card component with alert animation.
framer-motion, lucide-react1 file
animate-border-card-motion
A Card component with animated border effect.
lucide-react2 files
animated-list-motion
A list component with staggered animation.
motion/react, simplebar-react, lucide-react1 file
animated-tab-motion
A tab component with animated selection.
motion/react1 file
animated-text-background-motion
A text component with animated gradient background.
framer-motion1 file
animated-tooltip-motion
A tooltip component with animated selection.
motion/react1 file
bell-notify-button
A Button component with optional code display for UI blocks.
motion/react, lucide-react1 file
best-selling-product
A Card component with optional code display for UI blocks.
card, button1 file
blog-cards
A Card component with optional code display for UI blocks.
@iconify/react, react-icons1 file
card-circle-motion
A Card component with circle reveal animation.
framer-motion1 file
card-lift-motion
A Card component with lift animation on hover.
framer-motion1 file
current-value-chart
A Chart component with optional code display for UI blocks.
card, button1 file
current-year-chart
A Chart component with optional code display for UI blocks.
card1 file
customers-chart
A Chart component with optional code display for UI blocks.
card1 file
download-banner
A banner component with optional code display for UI blocks.
button1 file
earned-chart
A Chart component with optional code display for UI blocks.
card1 file
empty-banner
A banner component with optional code display for UI blocks.
button, card1 file
error-banner
A banner component with optional code display for UI blocks.
button, card1 file
expandable-card-motion
A Card component that expands on click.
motion/react, lucide-react1 file
expnace-chart
A Chart component with optional code display for UI blocks.
card1 file
feed-cards
A Card component with optional code display for UI blocks.
@iconify/react1 file
file-upload-motion
A file upload component with drag and drop animation.
motion/react, @tabler/icons-react, react-dropzone1 file
flip-card-motion
A Card component with flip animation.
framer-motion, @iconify/react1 file
followers-chart
A Chart component with optional code display for UI blocks.
@iconify/react1 file
gift-cards
A Card component with optional code display for UI blocks.
card, button1 file
glitch-button
A Button component with glitch animation effect.
framer-motion1 file
glow-link-button
A Button component with glow effect on hover.
1 file
greeting-banner
A banner component with optional code display for UI blocks.
@iconify/react1 file
heartbeat-effect-button
A Button component with heartbeat effect animation on hover.
button1 file
heart-like-button
A Button component with heart animation for like functionality.
motion/react, lucide-react1 file
hover-lift-button
A Button component that lifts on hover.
framer-motion1 file
image-comparison-motion
A component for comparing two images with a slider.
motion/react1 file
income-chart
A Chart component with optional code display for UI blocks.
card1 file
input-form-motion
An input form component with spotlight effect.
motion/react1 file
input-placeholder-motion
An input form component with spotlight effect.
motion/react1 file
insight-card-motion
A Card component displaying insights with animation.
lucide-react1 file
link-preview
An preview link component with spotlight effect.
motion/react, qss1 file
liquid-fill-button
A Button component with liquid fill animation on hover.
framer-motion1 file
login-1
A Card component with optional code display for UI blocks.
card, button, field, input1 file
login-2
A Card component with optional code display for UI blocks.
button, field, input1 file
login-3
A Card component with optional code display for UI blocks.
button, field, input, card1 file
login-4
A Card component with optional code display for UI blocks.
button, field, input, card1 file
magnetic-button
A Button component with magnetic effect animation on hover.
button1 file
matrix-rain-button
A Button component with matrix rain animation effect.
framer-motion1 file
message-card-motion
A Card component displaying messages with animation.
lucide-react1 file
monthly-earning-chart
A Chart component with optional code display for UI blocks.
card, button1 file
most-visited-chart
A Chart component with optional code display for UI blocks.
@iconify/react1 file
music-cards
A Card component with optional code display for UI blocks.
@iconify/react1 file
mutual-banner
A banner component with optional code display for UI blocks.
card, button1 file
notification-banner
A banner component with optional code display for UI blocks.
card, button1 file
otp-1
A Card component with optional code display for UI blocks.
button, field, input-otp, card1 file
otp-2
A Card component with optional code display for UI blocks.
button, field, input-otp1 file
otp-3
A Card component with optional code display for UI blocks.
button, field, input-otp, card1 file
page-impression-chart
A Chart component with optional code display for UI blocks.
@iconify/react1 file
payment-gateways
A Card component with optional code display for UI blocks.
card, button1 file
playful-wiggle-button
A Button component with playful wiggle animation.
motion/react1 file
poll-of-week
A Card component with optional code display for UI blocks.
card, button1 file
poll-result
A Card component with optional code display for UI blocks.
card, progress1 file
products-cards
A Card component with optional code display for UI blocks.
@iconify/react1 file
profile-cards
A Card component with optional code display for UI blocks.
card, button1 file
projects-chart
A Chart component with optional code display for UI blocks.
@iconify/react1 file
recent-comments
A Card component with optional code display for UI blocks.
card1 file
recent-messages
A Card component with optional code display for UI blocks.
card1 file
recent-transaction
A Card component with optional code display for UI blocks.
card, badge1 file
revenue-updates-chart
A Chart component with optional code display for UI blocks.
@iconify/react1 file
review-cards
A Card component with optional code display for UI blocks.
card, button1 file
ripple-effect-button
A Button component with ripple effect animation on hover.
motion/react1 file
sales-overview-chart
A Chart component with optional code display for UI blocks.
react-icons1 file
settings-card
A Card component with optional code display for UI blocks.
@iconify/react1 file
shine-effect-button
A Button component with shine effect animation on hover.
button1 file
shiny-button
A Button component with shiny effect animation.
button2 files
shiny-text-motion
A text component that shines.
card2 files
signup-1
A Card component with optional code display for UI blocks.
card, button, field, input1 file
signup-2
A Card component with optional code display for UI blocks.
button, field, input1 file
signup-3
A Card component with optional code display for UI blocks.
button, field, input, card1 file
social-card
A Card component with optional code display for UI blocks.
card1 file
social-cards
A Card component with optional code display for UI blocks.
card1 file
social-post
A Card component with optional code display for UI blocks.
lucide-react1 file
star-favourite-button
A Button component with star animation for favourite functionality.
motion/react, lucide-react1 file
tap-pop-button
A Button component with tap and pop animation effect.
framer-motion1 file
task-list
A Card component with optional code display for UI blocks.
card, badge, checkbox1 file
text-roller-motion
A text component that rolls through a list of words.
1 file
text-shimmer-motion
A text component with shimmer effect.
motion/react1 file
three-d-card-motion
A Card component with 3D hover effect.
framer-motion1 file
top-cards
A Card component with optional code display for UI blocks.
swiper1 file
total-earnigs-chart
A Chart component with optional code display for UI blocks.
card1 file
transition-tab-motion
A tab component with transition effects.
motion/react1 file
typing-animation-motion
A text component with typing animation.
1 file
upcomming-activities
A Card component with optional code display for UI blocks.
card1 file
user-cards
A Card component with optional code display for UI blocks.
card, button1 file
user-info-card
A Card component with optional code display for UI blocks.
@iconify/react1 file
user-profile-card
A Card component with optional code display for UI blocks.
@iconify/react1 file
views-chart
A Chart component with optional code display for UI blocks.
card1 file
weekly-stats-chart
A Chart component with optional code display for UI blocks.
@iconify/react1 file
welcome-banner
A banner component with optional code display for UI blocks.
card, button1 file
yarly-breakup-chart
A Chart component with optional code display for UI blocks.
@iconify/react1 file
yearly-sales-chart
A Chart component with optional code display for UI blocks.
react-icons1 file

From the tailwind-admin readme

Shadcn admin dashboard built with React & Tailwind CSS

Multi-Framework UI Kit for Next.js, React, Angular 21, Vue & Tanstack Start

A free, open-source Tailwind CSS admin dashboard template built for modern web developers.
Use it to rapidly build dashboards, SaaS apps, admin panels, CRM systems, and internal tools.

⭐ If you find this useful, please consider giving it a star — it helps the project grow! 🛠

🔥 Key Features

✅ Built with Tailwind CSS
✅ Supports:

Next.js : Live Demo
React : Live Demo
Angular 21 : Live Demo
Vue : Live Demo
Tanstack Start : Live Demo

👋 Introduction

Tailwindadmin is a modern, responsive, and free admin dashboard template built with Tailwind CSS, available in both React and Next.js versions. Designed with a focus on clean design, utility-first styling, and modular components, it's a solid foundation for building powerful web apps quickly and efficiently.

Whether you're developing a SaaS dashboard, eCommerce back office, analytics interface, or internal admin tool, Tailwindadmin provides a flexible and developer-friendly starting point. It includes a variety of pre-designed pages, reusable UI components, and layout options to help you get up and running fast.

Built for speed, customization, and scalability, Tailwindadmin is fully responsive, easy to extend, and optimized for modern frontend development workflows.

🔑 Key Features

Responsive Design
Built with Tailwind CSS’s mobile-first utility classes to deliver a seamless experience across desktop, tablet, and mobile devices.
Customizable Components
Modular and reusable components styled with Tailwind — easy to customize and extend to fit your project’s needs.
Tailwind CSS Integration
Uses Tailwind’s utility-first approach for faster UI development, consistent design, and easy theming.
Pre-designed Pages
Includes essential pages like Dashboard, Login, Register, User Profile, Tables, Charts, and Error pages to jumpstart development.
Dark Mode Support
Optional dark mode integration for improved accessibility and a modern user experience.
Flexible Layouts
Built-in sidebar, topbar, and page layout structures to support complex dashboard designs out of the box.
Performance Optimized
Fast loading times and minimal CSS bloat thanks to Tailwind’s tree-shaking and lightweight build process.
Available in React & Next.js
Choose between React or server-rendered Next.js versions based on your project requirements.
Shadcn UI Integration for React, Nextjs, Vue and Tanstack Start
Leverages Shadcn UI for beautifully crafted, accessible, and themeable UI components built on top of Radix and Tailwind CSS.

🛠️ Notable Libraries and Tools

Library / Tool	Description
Next.js	A powerful React framework that enables server-side rendering, static site generation, and optimized performance for modern web apps.
React	A flexible JavaScript library for building user interfaces using component-based architecture.
Tailwind CSS	A utility-first CSS framework for rapidly building modern and responsive user interfaces.
Tanstack Start	A Full-stack Framework powered by TanStack Router for React and Solid.
Shadcn UI	A set of beautifully designed, accessible components built with Tailwind CSS and Radix UI primitives.
ApexCharts	A Popular charting libraries used for visualizing data in dashboards. Replace or remove based on actual usage.
Iconify Icons	Lightweight and customizable SVG icons that fit seamlessly into modern UI designs.

💾 Installation Guide

Welcome to the Tailwind Admin Dashboard Template! This guide will walk you through the installation and setup process, so you can get started with building your custom admin dashboard in no time.

📝 Steps to Install

1. Clone The Repository

The easiest way to get started is by cloning the repository or download the zip file. You can do this with the following command:

git clone https://github.com/Tailwind-Admin/free-tailwind-admin-dashboard-template

2. Select A Technology Version

Choose the version you want to work with (you can even choose the React version). You can do this with the following command:

cd ./tailwind-admin-nextjs-free/package

3. Install Dependencies

Install the relative Dependencies of the template. You can do this with the following command:

npm install

4. Start the Development Server

Once the dependencies are installed, you can start a local development server to preview the template:

For React / Next /Vue /Tanstack Start

npm run dev

For Angular

ng serve

📝 Documentation

Welcome to the Tailwind Admin Dashboard Template documentation! Whether you're just getting started or looking to explore advanced features, this guide will help you set up and customize your project with ease.

👉 Next.js :- Click here to read the full documentation

👉 React.js :- Click here to read the full documentation

👉 Tanstack Start :- Click here to read the full documentation

👉 Angular :- Click here to read the full documentation

👉 Vue :- Click here to read the full documentation

Contributing

Please read the contributing guide.

🌟 Show Your Support

If this project helped you:

⭐ Star this repository 🍴 Fork it 🧠 Share it with other developers

Your support helps this project grow faster!

Nextjs Project:

Read the rest on GitHub →

What tailwind-admin builds on

The packages and primitives its components pull in, counted across the registry.

card60button48field11input10badge5input-otp3progress2avatar1checkbox1hovercard1hovercardcontent1hovercardtrigger1

Registries like tailwind-admin

Magic UI

by Dillion Verma

components

coss

by coss

components

cult ui

by cult/ui

components

Animate UI

by Elliot Sutton

components

Browse every shadcn registry we track →

tailwind-admin contents

Signup Form Split

Elastic Slider Motion

Animate Table Motion

About tailwind-admin

Also in the tailwind-admin registry

action-tracking-motion

alert-card-motion

animate-border-card-motion

animated-list-motion

animated-tab-motion

animated-text-background-motion

animated-tooltip-motion

bell-notify-button

best-selling-product

blog-cards

card-circle-motion

card-lift-motion

current-value-chart

current-year-chart

customers-chart

download-banner

earned-chart

empty-banner

error-banner

expandable-card-motion

expnace-chart

feed-cards

file-upload-motion

flip-card-motion

followers-chart

gift-cards

glitch-button

glow-link-button

greeting-banner

heartbeat-effect-button

heart-like-button

hover-lift-button

image-comparison-motion

income-chart

input-form-motion

input-placeholder-motion

insight-card-motion

link-preview

liquid-fill-button

login-1

login-2

login-3

login-4

magnetic-button

matrix-rain-button

message-card-motion

monthly-earning-chart

most-visited-chart

music-cards

mutual-banner

notification-banner

otp-1

otp-2

otp-3

page-impression-chart

payment-gateways

playful-wiggle-button

poll-of-week

poll-result

products-cards

profile-cards

projects-chart

recent-comments

recent-messages

recent-transaction

revenue-updates-chart

review-cards

ripple-effect-button

sales-overview-chart

settings-card

shine-effect-button

shiny-button

shiny-text-motion

signup-1