Tairo 2.0.0 - Multipurpose Nuxt Tailwind CSS Dashboard System

Version: 2.0.0
High Resolution: Yes
Compatible Browsers: Firefox, Safari, Opera, Chrome, Edge
Compatible With: TypeScript
Columns: 4+
Files Included: HTML Files, CSS Files, JS Files
Documentation: Well Documented
Layout: Responsive
Last Update: 16 April 2025
Published: 3 years ago

Regular License

Quality checked

Future updates

Excellent support

$49

Price is in US dollars

Get it Now! Live Preview

Tairo - Multipurpose Nuxt Tailwind CSS Dashboard System

Tairo is a full dashboard design system and a complete rewrite of Vuero using Nuxt and Tailwind CSS. It ships ready-to-use pages, a modular design toolkit, and a built-in quickstarter to jumpstart development.

Version 2.0.0 - Apr 16, 2025

Features

add AddonMapboxLocationPicker component and add examples in form layout
add AI chat page
add AI layouts
add button to toggle switcher in topnav layout and update dashboard layout reference
add collapse layout components and configuration
add DemoStarterSwitcher component and integrate it into starter pages
add DocInfo component and update documentation with new info messages
add error handling for Mapbox token validation in AddonMapboxLocationPicker and map components
add i18n support with rtl / ltr example locales
add lightweight charts addon component
add messaging API and integrate DemoSubsidebarMessaging component
add new demo images and update documentation references
add new demo pages screenshots
add new layout components and improve existing layouts for better structure and navigation
add new SVG icons for bookworm, music band, and gym
add nuxt/font module to replace fontsource
add onBeforeSumbit hook on multi step form
add preferences set of demo pages
add sidenav layout components and configuration
add sidenav layout layer
add sidenav layout showcase to landing
add state prefix to nui-focus utility
add switcher icon to sidebar for customization
add TairoMobileDrawer component with swipe functionality and body scroll lock
add topnav layout components and configuration
create TairoMenu components from reka-ui navigation menu
disable Options API support for smaller bundles
enhance AddonApexcharts component with improved type definitions
enhance AddonDatepicker component with improved type definitions
enhance AddonInputPassword component with customizable icons and loading state
enhance component styles and update icon usage for improved UI consistency
enhance layout and styling in card grid components for improved UI consistency
enhance layout and styling in list view components for improved UI
enhance layout and styling in project components for improved UI consistency
enhance layout and styling in project list components for improved UI consistency
enhance layout and styling in user and tile grid components for improved UI consistency
enhance layout and styling in various list and table components for improved UI consistency
enhance messaging component with improved scrolling and input handling
enhance sidenav layout with dynamic menu and update collapse layout integration
enhance TairoMenuLink component with tab variant support
improve component meta documentation rendering
improve demo search using minisearch
layout-collapse: open menu collapsible when path match current route
layout-sidebar: open subsidebar collapsible when path match current route
layout-sidenav: open menu collapsible when path match current route
migrate BasePagination props
migrate button action to button
migrate button close to button
migrate checkbox headless to reka-ui, create TairoCheckboxCardIcon
migrate checkboxes to shuriken ui 4 and create TairoCheckboxAnimated component
migrate data-nui-tooltip to tooltip component
migrate demo to nuxt 4 directory structure
migrate headless radios to shuriken ui 4 and create TairoRadioCard component
migrate headlessui Combobox to shuriken ui autocomplete
migrate headlessui Menu to reka DropdownMenu
migrate inputs to use BaseField component + create TairoInput and TairoSelect components
migrate quickstarter to nuxt 4 directory structure
migrate shuriken ui button icon to button
migrate to eslint v9
migrate to tailwind v4 and shuriken ui v4
prerender documentation code examples using nuxt content hooks
refactor demo chart components to utilize defineApexchartsProps for improved typing
remove dropdown variants
replace @vueform/slider component with shuriken ui slider
replace button group with tailwind classes
replace headless ui FocusLoop with reka FocusScope
replace listbox with new select component
replace nuxt-toaster with reka ui toasts
replace splitpanes with reka ui splitter
replace tairo modal with reka ui modal + remove @headlessui/vue
rework dashboards index
rework mapbox app demo
rework personal 2
split sidebar layout into smaller composable components
update addon input phone component
update avatar images and user details in messaging dashboard
update BaseButton components to use variant prop instead of color
update BaseProgress and BaseProgressCircle components to use model-value prop
update blur scales to tailwind 4
update chart components to use CSS variables for colors and enhance layout
update collapse layout styles and enhance sidebar components
update color classes from 'danger' to 'destructive' across multiple components
update component styles and improve UI consistency across various layouts
update doc to nuxt content 3 + replace AddonMarkdownRemark with MDC + merge documentation layer to demo project
update documentation to include new sidenav layer
update icon names and adjust styles in various components
update icons in form components and adjust styles for better visibility
update important syntax to tailwind 4
update layout configuration and enhance topnav content
update navigation
update new panels documentation
update new panels documentation
update nuxt to 3.16.0
update packages to shuriken ui 4 + use module instead of layer
update panel opening mechanism to use component references instead of nuxt app config
update preferences layout and improve UI consistency across various components
update profile demo data and enhance layout responsiveness with improved icon sizes
update profile layout and improve icon consistency for enhanced UI
update rounded scales to tailwind 4
update routing path and improve icon consistency in authentication components
update routing path for user info to improve navigation clarity
update routing paths and enhance text color consistency across layouts
update select component to use select item in slots
update shadow scales to tailwind 4
update shuriken ui composables names
update tag and icon box to use variant prop instead of color
update tailwind 4 import reference
update to reka ui 2.0.0
use Lazy prefix to import addon components
use LightningCSS as transformer / minifier
use reka PIN input on onboarding-1
useTemplateRef from vue 3.5
wrap radio with radio group component

Bug Fixes

add iconify json packages
add missing slots to AddonDatepicker
adjust icon size in TairoRadioCard component
adjust opacity for images in DemoStarterSwitcher and update navbar max-width
apexcharts dark mode tooltips and lines, todo: fix css rgb syntax
click event not being triggered in sidenav layout
ensure proper parsing of page query parameter in pagination components
fix apexcharts dark mode colors
fix collapse arrow showing on mobile
fix topnav circular menu tool key
handle undefined characters in convertToCssProperty function
increase toaster default z-index
minor layout issues and typos
move TairoLogo and TairoLogoText components to demo
move utility functions for color generation, currency formatting, file size formatting, and string capitalization to demo
remove 'contrast' prop from BaseTextarea, BaseSelect, and BaseInput components
remove `useTailwindColors` and `colorjs.io`
resolve bugs listed in issue 180, close #180
set default toaster z-index to 9999 to prevent toaster being hidden by other elements
small layout fixes
table head row hydration
table hydration issues
update ai ui sidebar css variable usage and dropdown z-index
update styling for LandingDemoLink component to enhance visibility of 'New' tag
update tailwind import to include static theme
update tailwind reference in custom stylesheets

Documentation

component-meta: add separate package to parse components meta

Performance

enable eslint cache
improve date-fns and v-calendar treeshaking

Refactors

add dedicated nuxt content layout for documentation
add initial layout sidebar component and configuration
add new app screenshots
content demo source injection inside a nuxt module
documentation: create content-documentation module + inject demo components + fix prose components
enhance hobbies dashboard layout and update datepicker component
enhance sidebar link styles and update component layouts for better readability
extract all charts to dedicated components
improve 8 dashboard pages
improve banking dashboards
improve dashboard pages
improve documentation pages
improve mobile navigation on new layouts
merge layout layers in tairo layers and landing layer in demo app
remove old tairo popover components
remove ptablet and ltablet usage
remove unused old layout components and cleanup app config
remove vue-axe plugin and associated component from demo app
remove vue3 carousel components and related documentation
rename CSS variables to include 'tairo' prefix
rename CSS variables to include 'tairo' prefix
rename tailwind.css to main.css to align with tailwind documentation
replace layers with v4
rework personal 3
simplify documentation content, remove old tooltip from examples, remove unused doc components
simplify messaging layout and enhance component structure for improved readability
simplify nuxt config and routes rules
update calendar event components for improved styling and usability
update documentation structure and improve content across various guides and setup
update routing paths and improve component styles across multiple files
update sidebar component for improved layout and navigation
update sidebar labels and enhance calendar layout for improved navigation and usability
update sidebar trigger to use NuxtLink and enhance layout padding in dashboards
update text alignment classes and improve flag icon mappings

Notes

NOTE: Please note that photos are not included in the main download files.

Version 1.5.0 - Apr 11, 2024

Bug Fixes

AddonCarousel: allow to define vue3-carousel props and events
calendar z index
content typos
demo: improve panel a11y
demo: proper use of vueform validation in new card form
demo: reuse components and update deprecated props
documentation examples responsiveness
layer-collapse: burger menu hydration mismatch
message icons demo
prop typos
search modal text size and layout
TairoToc: remove fixed styles, add nav-end slot and focus elements on click
use NuxtPage instead of RouterView in page sublayouts

Features

add account pages
add badge to new content in demos page
add balance dashboard
add banking dashboard 4 and messaging v2
add card pages
add dropdown with form variations
add Icon nav layer
add new dashboards
add overview dashboard
add payments and transactions
add quickview dashboard
add recipient details
add stepper forms
add subpages
add TairoImageZoom component
add value to v-focus in order to conditionally disable focusing
demo: disable inline styles and enable view transition api
layout-collapse: add tooltip to navigation items when collapsed
make tairo modal wrapper tag customizable
panels: add 'md' size + teleport panels to body
set packageManager field and dependencies in layers for remote
update documentation
update landing master layouts
update layers documentation
update to nuxt 3.11
use new BaseInputHelpText component
use shiki instead of shikiji
useMultiStepForm: add validation and documentation

Documentation

add button to open customization modal
add spellchecker
autocomplete: add allow create item example
rework learning path, update examples and components reference

Version 1.4.0 - Jan 25, 2024

Features

add autocomplete country example
add password input component and dependencies, replacement to TairoPasswordStrength
Add phone input component and dependencies
add shuriken-gradient.svg and shuriken-gradient-dark.svg logos
input number component usage and add related documentation
refactor autocomplete examples
refactor button-action, accordion, avatar and breadcrumb docs
replace prettier with eslint stylistic
TairoPopover: improve component placement with floating ui
update avatar and accordion docs
update checkbox docs
update components doc examples and text
update components documentation
update documentation overview
update input docs
update input file docs
update input number docs
update listbox docs
update Mapbox styles and geocoder placement
update nuxt configuration files
update nuxt, shuriken-ui and zod
update remaining docs pages
upgrade to shuriken-ui v2 and nuxt v3.9

Bug Fixes

add panel emits demo
convert charts series to use shallowRef
demo: new event date picker data binding
improve server response type
lazyload markdown imports
markdown rendering reactivity
move unused dependencies from layers to demo
null reference errors in app.tairo properties
page and layout transitions to app configuration
replace tailwind w/h classes with size
use BaseCheckbox and BaseIconBox color props
use import.meta.env instead of process.env

Documentation

component-meta: add separate package to parse components meta

Performance

enable eslint cache
improve date-fns and v-calendar treeshaking

Refactors

add dedicated nuxt content layout for documentation
add initial layout sidebar component and configuration
add new app screenshots
content demo source injection inside a nuxt module
documentation: create content-documentation module + inject demo components + fix prose components
enhance hobbies dashboard layout and update datepicker component
enhance sidebar link styles and update component layouts for better readability
extract all charts to dedicated components
improve 8 dashboard pages
improve banking dashboards
improve dashboard pages
improve documentation pages
improve mobile navigation on new layouts
merge layout layers in tairo layers and landing layer in demo app
remove old tairo popover components
remove ptablet and ltablet usage
remove unused old layout components and cleanup app config
remove vue-axe plugin and associated component from demo app
remove vue3 carousel components and related documentation
rename CSS variables to include 'tairo' prefix
rename CSS variables to include 'tairo' prefix
rename tailwind.css to main.css to align with tailwind documentation
replace layers with v4
rework personal 3
simplify documentation content, remove old tooltip from examples, remove unused doc components
simplify messaging layout and enhance component structure for improved readability
simplify nuxt config and routes rules
update calendar event components for improved styling and usability
update documentation structure and improve content across various guides and setup
update routing paths and improve component styles across multiple files
update sidebar component for improved layout and navigation
update sidebar labels and enhance calendar layout for improved navigation and usability
update sidebar trigger to use NuxtLink and enhance layout padding in dashboards
update text alignment classes and improve flag icon mappings

Version 1.3.0 - Sep 19, 2023

Features

TairoFlexTableCell: add clamp property
TairoTable: add scrollable property
Topnav: add configuration for the footer

Bug Fixes

disable custom assets names
documentation component meta
inbox: mobile layout mobile size issue
nuxt loading indicator color
onboarding: improve OTP input
replace shiki with shikiji
squeezed color switcher button on mobile landing navbar
TairoTopnavLayout: allow to not provide header component
TairoTopnavLayout: remove unnecessary required props
Topnav: disable transition on theme toggle
update vue3-smooth-dnd + remove related pnpm patch
upgrade engines to node 18 and pnpm 8

Version 1.2.0 - Sep 11, 2023

Features

add calendar app
add overlay to sidebar and collapse layout on small screens, close
add topnav layout layer, add layout switcher composable and refactor component, add landing sectio
doc content updates, recursive demo extraction
replace parcel watcher with new chokidar granular
replace unplugin-fonts with variable fontsource
upgrade to shuriken-ui/nuxt to 1.0.0