Free, always open-source Vue 3 + Tailwind CSS 4 admin dashboard components — install once, import any component directly, ship a dashboard today.
This package takes the reusable half of TailAdmin Vue
— the beautiful, community-loved admin template — and publishes it to npm as plain, importable
source. No forking the repo, no copy-pasting components between projects, no waiting for a build
step: npm install, import the component you need, and it just works.
TailAdmin Vue ships as a full demo application — great for a first look, awkward to reuse across
several projects without dragging its whole app shell along or re-cloning it every time. This
package strips that down to what's actually reusable and puts it behind a normal npm install, so
every Dynamia project (or yours) pulls from one source of truth and stays in sync with a
npm update.
- 🧩 60+ base components + 47 icons — layout (sidebar, header, responsive shell), forms, tables, charts, ecommerce widgets, profile cards, and more.
- 🧱 50+ additional
components/ext/*building blocks — data tables and grids, form inputs (money, OTP/PIN, rating, color…), media capture, display, scheduling, commerce, navigation (command palette, kanban, tree menu with a condensed flyout), and page shells (landing, docs, auth, mobile, closable workspace tabs) for building real admin/SaaS/ERP/POS features on top of the base template. See below. - 📦 Import exactly what you use — no bundle, no barrel-file bloat. Pull in one
.vuefile and its transitive imports, nothing else. - 🎨 Themeable at runtime — Tailwind v4 compiles colors to CSS custom properties, so
re-theming the brand color is a one-line
style.setPropertyaway. See the picker inexamples/basic-appfor a working demo. Importtheme.cssinstead ofstyle.cssto skip the Google Fonts request and bring your own font. - 🌓 Dark mode & RTL built in, via the same composables the components already use.
- 🌐 100 Web Components — the standalone pieces are also published as custom elements
(
@dynamia-tools/tailadmin-vue-wc), usable without Vue. See below. - ✅ Type-checked on every change, and the components added on top of upstream (tree menu, closable tabs, sidebar state) are covered by a Vitest suite that runs in CI before every publish.
- 🆓 MIT-licensed, no Pro tier, no upsells — this fork intentionally dropped TailAdmin's "Purchase Plan" prompt. Everything in here is free to use.
- 🔄 Manually synced with upstream, deliberately — every change is reviewed before it lands, see docs/SYNC.md.
npm install @dynamia-tools/tailadmin-vueImport the theme CSS once in your entrypoint:
// main.ts
import '@dynamia-tools/tailadmin-vue/style.css'style.css also loads the Outfit web font from Google Fonts. To avoid that third-party request
(strict CSP, offline/intranet deployments) or to use your own font, import theme.css instead — the
same tokens, utilities and base styles with no external requests — and override the font token:
/* app.css */
@import '@dynamia-tools/tailadmin-vue/theme.css';
@source '../node_modules/@dynamia-tools/tailadmin-vue/src';
@theme {
--font-outfit: Roboto, system-ui, sans-serif; /* the base layer applies `font-outfit` to <body> */
}Import components directly from their source path:
<script setup lang="ts">
import Button from '@dynamia-tools/tailadmin-vue/components/ui/button/Button.vue'
import Alert from '@dynamia-tools/tailadmin-vue/components/ui/Alert.vue'
</script>Composables and icons:
import { useSidebar } from '@dynamia-tools/tailadmin-vue/composables/useSidebar'
import { BoxCubeIcon } from '@dynamia-tools/tailadmin-vue/icons'Browse src/components/ in this repo (or in node_modules once installed) to see everything
available: ui/, forms/, tables/, charts/, layout/, common/, profile/, ecommerce/,
plus the extended library under ext/ (see below).
See examples/basic-app for a full working Vite app wired up against
this package — every page in the sidebar rendering end to end, plus a live brand-color picker.
For the details — layout components (AdminLayout, AppSidebar, AppHeader,
NotificationMenu, UserMenu, including how to plug in your own menu, header widgets, and
user/notifications data via their props and slots) and the extended components/ext library —
see docs/USER_GUIDE.md. examples/custom-app is
a single page putting every layout slot/prop to use at once, with a recolored sidebar and header.
Beyond the base template, this package ships 57 additional, domain-agnostic components
under src/components/ext/<category>/, for building real administrative/SaaS/ERP/POS/ecommerce
features rather than just a demo dashboard: DataTable, TreeTable, MoneyInput, PinInput,
Rating, Webcam, SignaturePad, Calendar, Cart, ItemGrid, Kanban, Map, and more —
see the full catalog and usage patterns in
docs/USER_GUIDE.md § Extended component library.
Every one of them also has a live, interactive demo in
examples/basic-app/src/views/ext/ — the fastest way to
see one in action before reading its source.
<script setup lang="ts">
import DataTable from '@dynamia-tools/tailadmin-vue/components/ext/data/DataTable.vue'
import Rating from '@dynamia-tools/tailadmin-vue/components/ext/input/Rating.vue'
</script>Don't run Vue — or Node at all? @dynamia-tools/tailadmin-vue-wc wraps the
standalone components as native custom elements (<ta-alert>, <ta-data-grid>, <ta-cart>, …),
usable from plain HTML, React, or any other framework. It's a separate npm package published from this repo, always at the same
version as this one.
npm install @dynamia-tools/tailadmin-vue-wc vue<link rel="stylesheet" href="node_modules/@dynamia-tools/tailadmin-vue-wc/dist/style.css" />
<script type="module">
import '@dynamia-tools/tailadmin-vue-wc/ta-alert' // with a bundler/Vite; see the CDN guide below otherwise
</script>
<ta-alert variant="success" title="Saved" message="Your changes were saved."></ta-alert>Or skip npm entirely — a static .html file plus an import map pointing at a CDN is enough. See
the package's README for the no-build/CDN guide,
typed helpers (mount, on, bindModel), events, dark mode, and known limitations. Layout
shells (AdminLayout, sidebar, header) are not included — they need a full Vue app.
- Vue
^3.5 - Vue Router
^4or^5(used by layout components: sidebar, header) - Tailwind CSS
^4, configured to scannode_modules/@dynamia-tools/tailadmin-vue/src/**/*.vue - Vite (or any bundler that resolves relative
.vue/.tsimports via npmexports)
Optional dependencies depending on which components you use (declared as optional
peerDependencies — install only what you need): apexcharts + vue3-apexcharts (charts),
fullcalendar + @fullcalendar/vue3 (calendar, also used by ext/scheduling/Calendar),
leaflet (maps — CustomerDemographic and ext/display/Map), jsvectormap + vuevectormap
(vector maps), flatpickr + vue-flatpickr-component (date picker, also used by
ext/scheduling/DateRangePicker), swiper (carousels), vuedraggable (drag & drop — also used
by ext/navigation/Kanban), dropzone (upload), simplebar-vue (scrollbars), floating-vue +
@floating-ui/vue (tooltips/popovers), lucide-vue-next (icons), qrcode (QR code generation —
ext/display/QrCode), marked + dompurify (Markdown rendering — ext/layouts/MarkdownViewer),
temporal-polyfill.
A few core layout components (AppSidebar, AppHeader's UserMenu/NotificationMenu)
reference images by absolute path (/images/logo/*.svg, /images/user/*) instead of importing
them as modules — same as upstream. This package ships that minimal set under public/; copy it
into your own project's public/ directory:
cp -r node_modules/@dynamia-tools/tailadmin-vue/public/images ./public/Other components (ProfileCard, ecommerce widgets, product/country demo data, etc.) reference
additional /images/... paths that are not bundled here — those are upstream's own demo
placeholder content, not shipped to keep the package light. If you use one of those components
as-is, provide matching files at those paths or adapt the component to your own image props/URLs.
This package uses CalVer (YY.MM.MICRO), independent of TailAdmin's own
version numbers — e.g. 26.9.0 is the first release published in September 2026. It makes it
easy to tell at a glance how recently a given release was synced with upstream.
@dynamia-tools/tailadmin-vue-wc always shares this exact version — one release publishes both.
This package does not git-fork/merge from TailAdmin — it is synced manually when needed,
preserving local changes (relative imports instead of @/ aliases, package.json, exports,
this README). See docs/SYNC.md for the procedure.
MIT, same as the original project. Original components by TailAdmin (original repo). See LICENSE.
Publishing to npm runs via GitHub Actions when a GitHub Release is published, tagged with the
package.json version — either 26.9.0 or v26.9.0 both work, the workflow strips a leading
v before comparing (a tag push alone doesn't trigger it — publishing a release does). Requires
the NPM_TOKEN secret configured on the repo.
The same release also publishes @dynamia-tools/tailadmin-vue-wc (web-components/) — both
packages always share the same version, so bump version in both package.json files (see
its README). The workflow checks the tag
against both. CI (and the publish workflow) run npm run type-check and npm test first.
This package is free and always will be — no Pro tier, no paywalled components. If it saved you time and you'd like to support the maintenance and upstream syncing work, a coffee is always appreciated:
