Shuriken UI is a Design System created on top of Tailwind CSS. It was initiated for Tairo and is now available as a standalone package, this allow us to ship releases faster, and simplify upgrade on you side.

It's composed of two main packages:

• @shuriken-ui/tailwind: Contains the Tailwind CSS preset which register components through Tailwind CSS plugins. Those are configurable in the tailwind.config.ts file.
• @shuriken-ui/nuxt: The Nuxt layer which register the Vue components (prefixed by Base*). They use the Tailwind CSS classes introduced by the @shuriken-ui/tailwind package. Some components properties are configurable in the app.config.ts file.

A React version also exists, check on the Shuriken UI documentation for more information.

Useful resources:

• Learn about presets on tailwindcss.com
• Explore Shuriken UI preset on github.com

Let's take a look at the <BaseCard> component and how it's made.

On the Nuxt layer, the BaseCard component expose properties so it's convenient to use in your app.

We can see that the component use nui-card class to style the card.

The nui-card class is defined in the Tailwind CSS preset via a plugin and has a set of properties that can be customized in the tailwind.config.ts file.

There are two things to notice here:

• On the Nuxt component, we use the useNuiDefaultProperty function to get the default value of a property. This function is read from your app.config.ts file, so you can customize the default value of a property for all components at once.
• On the Tailwind CSS plugin, we use the theme object to get the configuration of the component. This configuration is read from the tailwind.config.ts file, so you can update design tokens for specific variants of a component.

Useful resources:

• Explore Shuriken UI storybook

You can change how Shuriken UI components look and behave by updating the app.config.ts and tailwind.config.ts files. Let's see some examples to understand how it works.

•Example 1: Set default props for all buttons

On the <BaseButton> we can see that color, rounded, size and variants properties are configurable through the app.config.ts file.

This allow to change the default value of those properties for all buttons at once so you don't have to repeat the same values on each button. You still can set the properties on each button if you need to override the default value.

You can go further by updating the tailwind.config.ts file to change the design tokens of the button component. Here is an example to update the font and text size of the button component for each button size:

•Example 2: Update look and behavior for nui-tooltip

By default, focusable elements always have a dotted outline when focused. This is made to improve accessibility. We can change the behavior to only show the outline when the user navigates with the keyboard, which is the default comportment of outline in most browsers.

We can also update the style and color of the outline. By default, the outline is dashed and the color is muted-300 in light mode and muted-600 in dark mode.

Useful resources:

• Shuriken UI Documentation
• Shuriken UI Tailwind github.com
• Shuriken UI Nuxt github.com