---
name: "@tailwind-admin"
slug: "tailwind-admin"
description: "Free, open-source admin dashboard template built with Tailwind CSS, shadcn/ui, and Radix primitives. Supports Next.js, React, Vue, Angular 21, and TanStack Start. Pre-designed pages include Dashboard, Login, Register, User Profile, Tables, Charts (via ApexCharts), and Error pages. Offers sidebar, topbar, and responsive layouts with dark mode. Iconify icons included. MIT license. Use for: bootstrapping SaaS dashboards, CRM panels, internal admin tools, or analytics interfaces across multiple frontend frameworks without starting from a blank page."
category: "Dashboard/admin templates"
tags: ["animation", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "icons", "loaders", "media", "overlays", "payments", "pro-available", "saas", "tables", "text-effects", "theming"]
framework: "vue"
license: "MIT"
author: "Tailwind-Admin"
website: "https://tailwind-admin.com/"
github: "https://github.com/Tailwind-Admin/free-tailwind-admin-dashboard-template"
registry: "https://tailwind-admin.com/r/registry.json"
pro: true
pro_url: "https://tailwind-admin.com/pricing"
github_stars: 230
component_count: 102
generated_at: "2026-07-28T08:00:50.948Z"
---

# @tailwind-admin

Free, open-source admin dashboard template built with Tailwind CSS, shadcn/ui, and Radix primitives. Supports Next.js, React, Vue, Angular 21, and TanStack Start. Pre-designed pages include Dashboard, Login, Register, User Profile, Tables, Charts (via ApexCharts), and Error pages. Offers sidebar, topbar, and responsive layouts with dark mode. Iconify icons included. MIT license. Use for: bootstrapping SaaS dashboards, CRM panels, internal admin tools, or analytics interfaces across multiple frontend frameworks without starting from a blank page.

## Links

- Website: https://tailwind-admin.com/
- GitHub: https://github.com/Tailwind-Admin/free-tailwind-admin-dashboard-template
- Registry JSON: https://tailwind-admin.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tailwind-admin
- This file: https://sh4dcn.vercel.app/md/tailwind-admin.md
- Pro / pricing: https://tailwind-admin.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://tailwind-admin.com/r/registry.json
pnpm dlx shadcn@latest add https://tailwind-admin.com/r/registry.json
bunx shadcn@latest add https://tailwind-admin.com/r/registry.json
# clone the source repo
git clone https://github.com/Tailwind-Admin/free-tailwind-admin-dashboard-template.git
# fetch the raw registry index
curl -s https://tailwind-admin.com/r/registry.json
```

## Components (102)

| name | type | description | install |
| --- | --- | --- | --- |
| download-banner | registry:component | A banner component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/download-banner.json` |
| empty-banner | registry:component | A banner component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/empty-banner.json` |
| error-banner | registry:component | A banner component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/error-banner.json` |
| greeting-banner | registry:component | A banner component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/greeting-banner.json` |
| mutual-banner | registry:component | A banner component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/mutual-banner.json` |
| notification-banner | registry:component | A banner component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/notification-banner.json` |
| welcome-banner | registry:component | A banner component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/welcome-banner.json` |
| best-selling-product | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/best-selling-product.json` |
| top-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/top-cards.json` |
| blog-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/blog-cards.json` |
| feed-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/feed-cards.json` |
| gift-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/gift-cards.json` |
| music-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/music-cards.json` |
| payment-gateways | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/payment-gateways.json` |
| poll-of-week | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/poll-of-week.json` |
| poll-result | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/poll-result.json` |
| products-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/products-cards.json` |
| profile-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/profile-cards.json` |
| recent-comments | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/recent-comments.json` |
| recent-messages | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/recent-messages.json` |
| recent-transaction | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/recent-transaction.json` |
| review-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/review-cards.json` |
| settings-card | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/settings-card.json` |
| social-card | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/social-card.json` |
| social-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/social-cards.json` |
| social-post | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/social-post.json` |
| task-list | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/task-list.json` |
| upcomming-activities | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/upcomming-activities.json` |
| user-cards | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/user-cards.json` |
| user-info-card | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/user-info-card.json` |
| user-profile-card | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/user-profile-card.json` |
| login-1 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/login-1.json` |
| login-2 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/login-2.json` |
| login-3 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/login-3.json` |
| login-4 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/login-4.json` |
| signup-1 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/signup-1.json` |
| signup-2 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/signup-2.json` |
| signup-3 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/signup-3.json` |
| signup-4 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/signup-4.json` |
| otp-1 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/otp-1.json` |
| otp-2 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/otp-2.json` |
| otp-3 | registry:component | A Card component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/otp-3.json` |
| current-value-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/current-value-chart.json` |
| current-year-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/current-year-chart.json` |
| customers-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/customers-chart.json` |
| earned-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/earned-chart.json` |
| expnace-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/expnace-chart.json` |
| followers-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/followers-chart.json` |
| income-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/income-chart.json` |
| monthly-earning-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/monthly-earning-chart.json` |
| most-visited-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/most-visited-chart.json` |
| page-impression-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/page-impression-chart.json` |
| projects-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/projects-chart.json` |
| revenue-updates-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/revenue-updates-chart.json` |
| sales-overview-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/sales-overview-chart.json` |
| total-earnigs-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/total-earnigs-chart.json` |
| views-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/views-chart.json` |
| weekly-stats-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/weekly-stats-chart.json` |
| yarly-breakup-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/yarly-breakup-chart.json` |
| yearly-sales-chart | registry:component | A Chart component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/yearly-sales-chart.json` |
| bell-notify-button | registry:component | A Button component with optional code display for UI blocks. | `npx shadcn@latest add https://tailwind-admin.com/r/bell-notify-button.json` |
| glitch-button | registry:component | A Button component with glitch animation effect. | `npx shadcn@latest add https://tailwind-admin.com/r/glitch-button.json` |
| glow-link-button | registry:component | A Button component with glow effect on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/glow-link-button.json` |
| heart-like-button | registry:component | A Button component with heart animation for like functionality. | `npx shadcn@latest add https://tailwind-admin.com/r/heart-like-button.json` |
| hover-lift-button | registry:component | A Button component that lifts on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/hover-lift-button.json` |
| liquid-fill-button | registry:component | A Button component with liquid fill animation on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/liquid-fill-button.json` |
| ripple-effect-button | registry:component | A Button component with ripple effect animation on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/ripple-effect-button.json` |
| shine-effect-button | registry:component | A Button component with shine effect animation on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/shine-effect-button.json` |
| magnetic-button | registry:component | A Button component with magnetic effect animation on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/magnetic-button.json` |
| heartbeat-effect-button | registry:component | A Button component with heartbeat effect animation on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/heartbeat-effect-button.json` |
| matrix-rain-button | registry:component | A Button component with matrix rain animation effect. | `npx shadcn@latest add https://tailwind-admin.com/r/matrix-rain-button.json` |
| playful-wiggle-button | registry:component | A Button component with playful wiggle animation. | `npx shadcn@latest add https://tailwind-admin.com/r/playful-wiggle-button.json` |
| shiny-button | registry:component | A Button component with shiny effect animation. | `npx shadcn@latest add https://tailwind-admin.com/r/shiny-button.json` |
| star-favourite-button | registry:component | A Button component with star animation for favourite functionality. | `npx shadcn@latest add https://tailwind-admin.com/r/star-favourite-button.json` |
| tap-pop-button | registry:component | A Button component with tap and pop animation effect. | `npx shadcn@latest add https://tailwind-admin.com/r/tap-pop-button.json` |
| action-tracking-motion | registry:component | A Card component with action tracking animation. | `npx shadcn@latest add https://tailwind-admin.com/r/action-tracking-motion.json` |
| alert-card-motion | registry:component | A Card component with alert animation. | `npx shadcn@latest add https://tailwind-admin.com/r/alert-card-motion.json` |
| animate-border-card-motion | registry:component | A Card component with animated border effect. | `npx shadcn@latest add https://tailwind-admin.com/r/animate-border-card-motion.json` |
| card-circle-motion | registry:component | A Card component with circle reveal animation. | `npx shadcn@latest add https://tailwind-admin.com/r/card-circle-motion.json` |
| card-lift-motion | registry:component | A Card component with lift animation on hover. | `npx shadcn@latest add https://tailwind-admin.com/r/card-lift-motion.json` |
| expandable-card-motion | registry:component | A Card component that expands on click. | `npx shadcn@latest add https://tailwind-admin.com/r/expandable-card-motion.json` |
| flip-card-motion | registry:component | A Card component with flip animation. | `npx shadcn@latest add https://tailwind-admin.com/r/flip-card-motion.json` |
| image-comparison-motion | registry:component | A component for comparing two images with a slider. | `npx shadcn@latest add https://tailwind-admin.com/r/image-comparison-motion.json` |
| insight-card-motion | registry:component | A Card component displaying insights with animation. | `npx shadcn@latest add https://tailwind-admin.com/r/insight-card-motion.json` |
| message-card-motion | registry:component | A Card component displaying messages with animation. | `npx shadcn@latest add https://tailwind-admin.com/r/message-card-motion.json` |
| three-d-card-motion | registry:component | A Card component with 3D hover effect. | `npx shadcn@latest add https://tailwind-admin.com/r/three-d-card-motion.json` |
| file-upload-motion | registry:component | A file upload component with drag and drop animation. | `npx shadcn@latest add https://tailwind-admin.com/r/file-upload-motion.json` |
| input-form-motion | registry:component | An input form component with spotlight effect. | `npx shadcn@latest add https://tailwind-admin.com/r/input-form-motion.json` |
| input-placeholder-motion | registry:component | An input form component with spotlight effect. | `npx shadcn@latest add https://tailwind-admin.com/r/input-placeholder-motion.json` |
| link-preview | registry:component | An preview link component with spotlight effect. | `npx shadcn@latest add https://tailwind-admin.com/r/link-preview.json` |
| animated-list-motion | registry:component | A list component with staggered animation. | `npx shadcn@latest add https://tailwind-admin.com/r/animated-list-motion.json` |
| dot-loader-motion | registry:component | A dot loader component with animation. | `npx shadcn@latest add https://tailwind-admin.com/r/dot-loader-motion.json` |
| elastic-slider-motion | registry:component | A slider component with elastic animation. | `npx shadcn@latest add https://tailwind-admin.com/r/elastic-slider-motion.json` |
| animated-text-background-motion | registry:component | A text component with animated gradient background. | `npx shadcn@latest add https://tailwind-admin.com/r/animated-text-background-motion.json` |
| text-roller-motion | registry:component | A text component that rolls through a list of words. | `npx shadcn@latest add https://tailwind-admin.com/r/text-roller-motion.json` |
| shiny-text-motion | registry:component | A text component that shines. | `npx shadcn@latest add https://tailwind-admin.com/r/shiny-text-motion.json` |
| text-shimmer-motion | registry:component | A text component with shimmer effect. | `npx shadcn@latest add https://tailwind-admin.com/r/text-shimmer-motion.json` |
| typing-animation-motion | registry:component | A text component with typing animation. | `npx shadcn@latest add https://tailwind-admin.com/r/typing-animation-motion.json` |
| animate-table-motion | registry:component | A table component with row animation. | `npx shadcn@latest add https://tailwind-admin.com/r/animate-table-motion.json` |
| animated-tab-motion | registry:component | A tab component with animated selection. | `npx shadcn@latest add https://tailwind-admin.com/r/animated-tab-motion.json` |
| transition-tab-motion | registry:component | A tab component with transition effects. | `npx shadcn@latest add https://tailwind-admin.com/r/transition-tab-motion.json` |
| animated-tooltip-motion | registry:component | A tooltip component with animated selection. | `npx shadcn@latest add https://tailwind-admin.com/r/animated-tooltip-motion.json` |

## For AI agents

```text
You are adding components from @tailwind-admin to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tailwind-admin.md) for the component list.
2. Fetch the machine-readable index: https://tailwind-admin.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tailwind-admin).
```