Tairo V2 beta

Tairo V2

We still have some work to do, mainly on the documentation, especially on the migration guide and on bug fixing. On that point, we will be pleased about receiving feedback from you.

Your feedback will be welcome to help us before stabilizing it as we will release when we think it is ready (current 04/2025). Your support will definitely help us ship it faster.

Try it now

You can try it now by cloning the edge branch and run pnpm --filter=demo dev

git clone git@github.com:cssninjaStudio/tairo.git
cd tairo
git checkout edge
pnpm install
pnpm --filter=demo dev

To-do

Major changes since V1

Tairo

New layout architecture: all layouts layers are merged to Tairo, to simplify maintenance and to allow you to build a more personalized navigation experience.
All pages rewritten: spacing and typography has been rethought to look more modern
Customization: app.config.ts and tailwind.config.ts are replaced by CSS variables
Nuxt 4 Ready: because we want to deliver releases more often as possible while keeping it at the edge
Shuriken UI V4: (docs)
- Switch from @headless-ui/vue to reka-ui: is our future-proof library to ensure all our components are accessible
- Tailwind V4: benefit from performance improvement and new awesome syntax.

Tairo Demo

i18n has been included (with RTL examples)
nuxt content v3 is used for the documentation
landing and documentation layers are merged into a single app
dependencies reduced by half

New layout structure

In Tairo V2, layouts have to be defined in the end user application rather than in the app config.

This will require you more work but allow you to handle all the cases you may encounter (like i18n, acl, etc ...)

Below is an example of anatomy for a layout in Tairo V2:

<template>
  <TairoCollapseLayout>
    <TairoCollapseSidebar>
      <TairoCollapseSidebarHeader />
      <TairoCollapseSidebarClose />
      <TairoCollapseSidebarLinks>
        <TairoCollapseSidebarLink />

        <TairoCollapseCollapsible>
          <template #trigger>
            <TairoCollapseCollapsibleTrigger />
          </template>

          <TairoCollapseCollapsibleLink />
        </TairoCollapseCollapsible>
      </TairoCollapseSidebarLinks>
    </TairoCollapseSidebar>

    <TairoCollapseContent>
      <slot />
    </TairoCollapseContent>
  </TairoCollapseLayout>
</template>

Layouts

Layout Type	Image
Tairo V2 Collapse Layout
Tairo V2 Sidebar Layout
Tairo V2 Sidenav Layout
Tairo V2 Topnav Layout
Tairo V2 Topnav (lite) Layout

CSS-45 Tairo V2 beta

Tairo V2

We still have some work to do, mainly on the documentation, especially on the migration guide and on bug fixing. On that point, we will be pleased about receiving feedback from you.

Your feedback will be welcome to help us before stabilizing it as we will release when we think it is ready (current 04/2025). Your support will definitely help us ship it faster.

Try it now

You can try it now by cloning the edge branch and run pnpm --filter=demo dev

Major changes since V1

New layout architecture: to allow you to build a more personalized navigation experience.
Customization: app.config.ts and tailwind.config.ts are replaced by CSS variables
Nuxt 4 Ready: because we want to deliver releases more often as possible while keeping it at the edge
Shuriken UI V4: (docs)
- Switch from @headless-ui/vue to reka-ui: is our future-proof library to ensure all our components are accessible
- Tailwind V4: benefit from performance improvement and new awesome syntax.

New layout structure

In Tairo V2, layouts have to be defined in the end user application rather than in the app config.

This will require you more work but allow you to handle all the cases you may encounter (like i18n, acl, etc ...)

<template>
  <TairoCollapseLayout>
    <TairoCollapseSidebar>
      <TairoCollapseSidebarHeader />
      <TairoCollapseSidebarClose />
      <TairoCollapseSidebarLinks>
        <TairoCollapseSidebarLink />

        <TairoCollapseCollapsible>
          <template #trigger>
            <TairoCollapseCollapsibleTrigger />
          </template>

          <TairoCollapseCollapsibleLink />
        </TairoCollapseCollapsible>
      </TairoCollapseSidebarLinks>
    </TairoCollapseSidebar>

    <TairoCollapseContent>
      <slot />
    </TairoCollapseContent>
  </TairoCollapseLayout>
</template>

Layouts

Layout Type	Image
Tairo V2 Collapse Layout	Tairo V2 Collapse Layout
Tairo V2 Sidebar Layout	Tairo V2 Sidebar Layout
Tairo V2 Sidenav Layout	Tairo V2 Sidenav Layout
Tairo V2 Topnav Layout	Tairo V2 Topnav Layout
Tairo V2 Topnav (lite) Layout	Tairo V2 Topnav (lite) Layout

Awesome!!! Congrat!

@stafyniaksacha

Thanks alot for the update @stafyniaksacha - just before I get started on doing feedback.. what would you like? bug reports, feedback on layout / structure, or something else? :-)

ie. I get errors on doing pnpm install - I guess I don't need to report that, right?
first impression browsing pages is also, that some pages looks unfinished / unpolished, but I guess you also are aware of that?

so, instead of spamming with cases like that, how can we help you in the best way, so that you can move forward faster? :-)

@hjelmdal

Hello @hjelmdal!

I think for now you can list your feedback here (updating the comment when needed)

ie. I get errors on doing pnpm install - I guess I don't need to report that, right?

With latests push everything should be ok, let us know if you have any issue, yes!

first impression browsing pages is also, that some pages looks unfinished / unpolished, but I guess you also are aware of that?

They should be ok, but we still have to make a final review, feel free to point out pages that don't look good :)

cool - for starters, don't know if I am just doing something wrong, but:

on the .app folder startup I get:
ERROR Pre-transform error: Failed to resolve import "/assets/css/main.css" from "virtual:nuxt:%2FUsers%2Fshn%2FSites%2FIMPACT%2F2025-Dashboard%2Fedge%2F.app%2F.nuxt%2Fcss.mjs". Does the file exist? 7:49:08 AM
Plugin: vite:import-analysis
File: virtual:nuxt:%2FUsers%2Fshn%2FSites%2FIMPACT%2F2025-Dashboard%2Fedge%2F.app%2F.nuxt%2Fcss.mjs:1:9
1 | import "/assets/css/main.css";
| ^

✔ Vite server built in 557ms 7:49:09 AM
✔ Nuxt Nitro server built in 559ms nitro 7:49:10 AM
ℹ Vite client warmed up in 2ms 7:49:10 AM

ERROR [request error] [unhandled] [GET] http://localhost:3000/

ℹ Error: Cannot find module '~/assets/css/main.css' imported from 'virtual:nuxt:%2FUsers%2Fshn%2FSites%2FIMPACT%2F2025-Dashboard%2Fedge%2F.app%2F.nuxt%2Fcss.mjs'.

If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution.
Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors

okay.. I had another look.... found out the reference was simply wrong in .app layer
you either need to add the main.css to assets/css/ folder (now it's placed in assets/ - or change the reference in nuxt.config.ts

Oh sorry, I did not mention that we do not have updated the quickstarter yet (that will be the last thing we will do)

You can try the demo using pnpm --filter demo dev

I know, but I need to try out the new layout structure, so that I can test whether that's suitable coming from the old structure... but I seem stuck if I want to keep the old structure, where I made a copy of one of the tairo layouts and put it in the layers/ folder, because now my tailwind classes in that layer does not seem to bundle the tailwind classes used there, and can't figure out why.

If I use the new structure and copy a layout from the demo folder, my initial states of collapsible menu items always seem open and will not close - although it works in the demo.. so I am stuck either way atm

okay.. I managed to get my layout built in the new structure. To me, the new layout structure doesn't really change anything - if I need to do modifications, I have to do the same approach to either overwrite components or break out of the layout and use my own component... I might be biased coming from the "old" structure, but I liked that I only extended the layer(s) needed, now it all seem baked into that one Tairo layer. After setting up your layer, it doesn't really make a diffence though.

I had 30 minutes in hand, so I figured that I could try to look through the demo to show some help..

Feedback

first of all.. SOLID work.. great job! worth waiting for!
So far, I like the layout and especially the switch to Reka seems slick. No more hydration mismatches as far as I can tell.
I like that the layout now defaults to full-width - an option could be to control this easy across the layout and maybe add option to overwrite per page as a setting.
No bigger issues found so far that is ruining the user experience to me in the demo.
Longer down the road, you could consider either sharpening the contrasts for accessibility compliance, or better, to add that as optional setting to see a high contrast version, as many would like soft contrasts (as is) better.
I have not reviewed it thoroughly, only just looked at all pages in menu until forms, and just briefly - so it's very exploratory and not consistently - haven't looked into break points, just randomly when something looked odd...

TLDR; take whatever you can use, and ignore the rest... just emptied my mind :-)

Issues / bugs / feedback found:

General:

you can't use page scroll when mouse is in the area chart due to zoom option (not a bug, but I prefer to disable that for more clean UX) - Chrome also flags this as non-passive event listener violation - works fine in the bar chart though.
It's really nice that the demo site is so interactive - but it's actually kinda disturbing when some clickable elements are dead, because so many of them actually has actions that leads you somewhere.. consider to put actions to all of them (I know it might take a lot of work)

Personal v1:

Team efficiency seams unfinished. compared to old Tairo the H avatar just miss a bg-color. In both versions, apexcharts container blocks the avatars from being clicked or hovered.

dashboards/overview

The area chart gradient does not really match the grey background man makes it look kinda weird in light mode. works much better in dark mode

dashboards/quickview

Recent activity "table-row" (I know it's flex table) does not highlight on hover - consider that for consistency.
Same issue on gradient from area chart (is it a general color setting?) - charts look good on white background, but not on muted bg's.

dashboards/banking-4

Table-row does not hover (this is an actual table)

dashboard/stocks

consider table-hover on trending stocks

dashboards/trading

trending stocks, consider hover
Here the gradient on apexchart actually fades pretty nice into the grey bg

dashboards/flights

hovering the dashed line gives you number of stops in a tooltip - for better UX, consider always showing it in the center, like other services do (momondo.com ie)

dashboards/company

area chart in the center tile is overflowing borders over container slightly
pending tickets - consider hover

dashboards/sales

charts in top tiles does aligns perfect at left border of box, but misses a few px on right hand side
orders summary chart does not work
mini calendar (last tile) does not align with the height of the other cards in the grid row

dashboards/ecommerce

same issue on chart
Here, the mini calendar is slightly longer that the other cards :-D

layouts/ai

select box in top - can't interact with the checkbox, instead the select closes
in the prompt box, on adding multi line, a scroll bar appears on the "send button" instead of the textbox growing.
history ... click action drop down menus are z-index behind sidebar
in dark mode, the history click actions are not visible

layouts/ai/ui

here the prompt box expands, nice!
inconsistency on side panel button.. when expanded there are two buttons to collapse.. when closed, you can only find it in the bottom of the page.. annoying if you pressed the one on top :-)
same issue on dark mode and history dropdown (positioning is slightly better, but edges still behind sidebar

dashboards/delivery

on viewports wider than 1800px-ish, the menu categories becomes round, consider making them fixed cylinders and then hide items on smaller viewports to be scrolled or revealed in carousel / slider

that was what I had time for in this short review.. hope it helps... :)

Thank you for the new release. A migration guide would be extremely helpful so that we don't have to spend a lot of time fixing issues.

Thank you for the new release. A migration guide would be extremely helpful so that we don't have to spend a lot of time fixing issues.

Hello ! We have them here: https://tairo.cssninja.io/documentation/guides/migration and https://shurikenui.com/docs/advanced/migration let us know if you find something missing !

Not sure if I have missed it but what's the replacement for the TairoModal component? Should I use the bare Dialog Component from reka-ui?

Navigation Menu

Repository navigation

Tairo V2 beta #205

Tairo V2

Try it now

To-do

Major changes since V1

Tairo

Tairo Demo

New layout structure

Layouts

Tairo V2

Try it now

Major changes since V1

New layout structure

Layouts

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tairo V2 beta #205

Description

Tairo V2

Try it now

To-do

Major changes since V1

Tairo

Tairo Demo

New layout structure

Layouts

Activity

linear commented on Mar 15, 2025

Tairo V2

Try it now

Major changes since V1

New layout structure

Layouts

asadmalik commented on Mar 15, 2025

hjelmdal commented on Mar 19, 2025

stafyniaksacha commented on Mar 19, 2025

hjelmdal commented on Mar 20, 2025

hjelmdal commented on Mar 20, 2025

stafyniaksacha commented on Mar 20, 2025

hjelmdal commented on Mar 21, 2025

hjelmdal commented on Mar 25, 2025

dipbhi commented on May 3, 2025

stafyniaksacha commented on May 4, 2025

mod08 commented on May 7, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions