Tairo - Multipurpose Nuxt Tailwind CSS Dashboard System - 2

Tairo is not a theme or a simple template, it is a full dashboard design system. Tairo is a full rewrite of Vuero using Nuxt and Tailwind CSS instead of Vue and Bulma. It provides ready pages to start building your application effortlessly, as well as a set of additional elements that will help you create new pages for your specific needs. Everything you need to start is there, dashboards, forms, layouts, profile, apps, elements, components and much more. Tairo ships with Shuriken UI, its own UI library, offering many customizations options. Its built-in quickstarter will help you jumpstart your project in no time. Please note however that Tairo is not a WordPress theme.

Built with Nuxt

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.

Vite Powered

Tairo is powered by Vite. Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. Vite features lightning-fast cold server start, instant hot module replacement (HMR) and true on-demand compilation.

Tailwind CSS

Tairo uses Tailwind CSS as its styling engine. Tairo is built with a custom Nuxt component library named Shuriken UI. Those components are dead simple and very customizable, in terms of shapes, variations and colors.

Modular Code

Tairo source code follows approved best practives and with a modular approach. Everything is already sliced in layers for a better code maintainability.

Nice looking starters

Tairo features 100+ prebuilt pages. it ships into a complete admin / webapp design system that you can use in your favorite platform or in a totally custom project

Responsive design

Tairo is based on Flexbox and CSS grid, wich are natively fit for mobile and tablets. Tairo is ultra responsive.

Template features

100+ demo pages
Blazing fast Vite bundler
Nuxt extensible layers
Native SSR and SEO
Hot Reloading
Graphic assets
Configurable UI library
Native Dark Mode
RTL support

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

Documentation

Online Documentation

Fonts

Montserrat
Roboto

Images

Illustrations

Changelog

-----------------------------------------------------------------------------------------
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 shuriken 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

-----------------------------------------------------------------------------------------
  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 ([e5cd43f](https://github.com/cssninjaStudio/tairo/commit/e5cd43f72bc0324ef86858ec95d0355b0c35f19d))
* **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

-----------------------------------------------------------------------------------------
  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

### Bug Fixes

* allow using panels with empty layout
* **collapse-layer:** allow to position elements at the end of navigation
* **documentation:** update layers orders in setup
* **formatters:** move date template helpers to demo layer
* **landing-layer:** add landing layout with panels
* **layout-switcher:** only show colors when can not change layout + show on landing
* personal dashboard 3 responsive styles
* **purge-comments:** remove capturing group in regex
* RTL issues
* **TairoContentWrapper:** hide actions if no slots are provided
* typo in api documentation

-----------------------------------------------------------------------------------------
  Version 1.1.0 - May 16, 2023
-----------------------------------------------------------------------------------------

### Features

* add layout switcher, fix messaging links and small bug
* add more preset colors in layout switcher

### Bug Fixes

* collapse navigation item click event
* landing demos page navbar group
* rgb hex color conversion