DEV Community: Sybren W

The one with styling Zag.js components with Tailwind CSS

Sybren W — Tue, 29 Nov 2022 16:38:36 +0000

When building a web application, I would advise using Chakra UI Vue to speed up your development and have accessibility build in.
But sometimes the project requirements are different, and you have to use Tailwind CSS, for example.

There is no reason to not start from zero, you can use Zag.js components with Vue.js (or React or Solid.js). Those components come with all the logic and accessibility in mind that you need to have a solid foundation.

Let’s go over how we can style Zag.js components using Tailwind CSS as CSS Framework. I will use the accordion component as an example, the purpose of this post is to show how you can set up Tailwind CSS and use it to add styling to the Zag.js components you are using.

A StackBlitz playground can be found here: https://stackblitz.com/edit/vue-zag-tailwind?file=src/App.vue

For those who do not know Zag.js, let’s start there first.

Zag.js

Zag is a toolkit that provides framework-agnostic UI components powered by State Machines. The components are build with accessibility in mind and handle all the logic for you. They are completely headless and unstyled, which gives you the full control to use your favourite styling solution.

Zag.js currently works seamless with React, Vue.js and Solid.js. In this blog, we will use Vue.js.

The Zag.js documentation can be found here: https://zagjs.com/.

Styling solution

As you might have guessed from the title, the styling solution will be Tailwind CSS. Let’s assume you do know about this CSS Framework, documentation can be found here: https://tailwindcss.com/.

Getting started

We will probably start with setting up our Vue.js project, using the Vue CLI and use Vite for example. When this has been done, we can easily add Zag.js to our project. If we scan the documentation, we quickly notice we first will have to pick a component we would like to use and style. Lets for example say the Accordion component. Documentation here: https://zagjs.com/components/vue-sfc/accordion.

We will have to install the machine for this component, which is completely framework-agnostic.

yarn add @zag-js/accordion

Then comes the part to connect this machine with the Vue.js framework. For this, we need to install the adapter.

yarn add @zag-js/vue

Just to play around with the accordion, we will add it to the App.vue file. For more information about what the Zag.js code does, please take a look at the documentation of Zag.js.

<script setup>
import * as accordion from '@zag-js/accordion'
import { normalizeProps, useMachine } from '@zag-js/vue'
import { computed } from 'vue'

const data = [
    { title: 'Watercraft', content: 'Sample accordion content' },
    { title: 'Automobiles', content: 'Sample accordion content' },
    { title: 'Aircrafts', content: 'Sample accordion content' },
]
const [state, send] = useMachine(accordion.machine({ id: '1' }))
const api = computed(() => accordion.connect(state.value, send, normalizeProps))
</script>

<template>
    <div ref="ref" v-bind="api.rootProps">
        <div
            v-for="item in data"
            :key="item.title"
            v-bind="api.getItemProps({ value: item.title })"
        >
            <h3>
                <button
                    v-bind="api.getTriggerProps({ value: item.title })"
                >
                    {{ item.title }}
                    <svg
                        data-accordion-icon
                        fill="currentColor"
                        viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                            clip-rule="evenodd"
                        ></path>
                    </svg>
                </button>
            </h3>
            <div
                v-bind="api.getContentProps({ value: item.title })"
            >
                {{ item.content }}
            </div>
        </div>
    </div>
</template>

Inside the accordion header, we have added an SVG which is an arrow to indicate the state of the accordion item. Right now we notice our accordion component has any styling to it, the SVG arrow is not rotating or anything. It’s time to add Tailwind CSS to make this all possible.

Adding styling

The Zag.js documentation does show a styling guide on how to style each accordion part with CSS here.
We won’t be using this solution since we would like to use the Tailwind CSS framework.

First, we will have to install Tailwind CSS, and it’s dependencies. Then run the init command to generate the following Tailwind CSS files: tailwind.config.cjs
and postcss.config.cjs.

yarn add tailwindcss postcss autoprefixer -D

npx tailwindcss init -p

Inside the generated tailwind.config.cjs file, we add the paths to all our/ template files.

// tailwind.config.cjs
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  ...
}

The last thing we need to do before adding Tailwind CSS classes and running our project is adding the @tailwind directives to our ./src/style.css file.

<!-- style.css -->
@tailwind base;
@tailwind components;
@tailwind utilities;

Now we can run the project and add some styling!

Add Tailwind CSS styling

We can start with adding some styling to the header of our accordion component by adding the following classes, for example.

<template>
...
    <h3>
        <button
            v-bind="api.getTriggerProps({ value: item.title })"
            class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 rounded-t-xl border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 hover:bg-gray-100"
            >
            ...
        </button>
    </h3>
...
</template>

Inside the accordion header we can now add the style logic to have the arrow SVG turn depending on the state. If the Zag machine api value is the same as the accordions item title this accordion item is open.

<template>
...
    <svg
        data-accordion-icon
        class="w-6 h-6 shrink-0"
        :class="{ 'rotate-180': api.value == item.title }"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            fill-rule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clip-rule="evenodd"
        ></path>
    </svg>
...
</template>

Some small styling to the accordion content, and we have a nicely styled accordion that is also accessible.

<template>
    ...
    <div
        v-bind="api.getContentProps({ value: item.title })"
        class="p-5 border border-b-0 border-gray-200"
        >
        {{ item.content }}
    </div>
...
</template>

Slot

That’s it! Not that complicated to set up and a pleasure to use!
I do know I didn’t put much time or thought into the styling itself, feel free to make it better! I would also like to challenge you to make the accordion component reusable.
Note that setting this up for a React project with Vite is very similar.

Sources

StackBlitz playground: https://stackblitz.com/edit/vue-zag-tailwind?file=src/App.vue

Zag.js Documentation: https://zagjs.com/

Tailwind CSS Documentation: https://tailwindcss.com/

The one with icon libraries in Nuxt.js and Chakra UI Vue

Sybren W — Fri, 25 Sep 2020 09:56:51 +0000

When I was working on my personal project with Nuxt.js and Chakra UI Vue I wanted to use FontAwesome Icons. I did struggle a bit to get the icons working in Chakra UI Vue inside my Nuxt.js project. Due to the fact that the Nuxt.config.js object looks a little different then the normal Vue.config.js object.

Getting started 🏃‍♂️

This small blog is all about Nuxt.js and Chakra UI Vue, meaning we have to start with creating a new Nuxt.js project.

Let's start quickly by using the create-nuxt-app.

npx create-nuxt-app <my-project>

Inside our terminal, we will have to answer a few questions. The only thing that's really important is that we select the Chakra UI option.

Personally, I've chosen for Yarn as 'package manager', but feel free to pick what you prefer. After going inside the project folder we can launch our project.

cd <project-name>
yarn dev

✅ The first step is done! We have our project running! Chakra UI is kind enough to change the Index.vue page to let us know everything is running correctly.

🎁 Adding the Icons

In this post, I'll be using FontAwesome Icons, here again, pick your favorite icon pack if you want.

We can add it to our project using the following yarn command.

yarn add @fortawesome/fontawesome-free
yarn add @fortawesome/free-brands-svg-icons

The first package @fontawesome-free are the free icons from the Font Awesome library. The other package @free-brands-svg-icons are the free icons from brands like Twitter etc. from the Font Awesome library.

For this project, I'm using the brands-svg-icons to make a list as shown below.

The next big step is to import the icons we wish to use, for example, the Twitter icon.

Inside the nuxt.config.js file we have to add an import at the top for the icons.

import { faTwitter, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'

Then we have to add the icons to the Chakra plugin inside the config object.

There it is! 🎉 Now we are ready to use the icons inside our templates!

We will use the CIcon component of Chakra UI to easily render the SVG Icons in our template.

In the name prop we have to pass the icon key. Which is is the icon name (faTwitter) without fa and lower case for Font Awesome icons.

I would suggest to check out the documentation here for more info on the props.

I really love how easy it is to use Icons in Chakra UI Vue and Nuxt.js. Thanks for reading and I do hope it will help you with your next project!

❤️ Contribute to this blog

Having any questions, caught a mistake, or have tips? Please reach out to me!

The one with Chakra UI Vue and color palette switching

Sybren W — Fri, 18 Sep 2020 18:56:10 +0000

Let's start with a new small fun project with Chakra UI Vue!

I'm going to build a Vue.js project where it's possible to switch between color palettes defined in a custom theme object.

I picked a few palettes from www.canva.com/colors/color-palettes to use them in the project later on.

Visually the project will not contain much besides a nice grid showing the colors. This is how the end result will look like.

Aight let's roll 🚗 with the Vue CLI and start a new project

vue create my-project
# OR
vue ui

After waiting a few seconds I can add Chakra UI Vue into this.

vue add chakra-ui

If you do like some magic ✨ you can enable the auto import of the Chakra UI components during the setup of the vue add chakra-ui run, like I did.

Now we have a clean project, inside the App.vue. We have a template with the <c-theme-provide/> tag and the <c-reset /> tag.

Just to have a start we will add a <h1> in there for some content.

We need the CThemeProvide component so that all the Chakra UI components inside the tag can access the theme object.

The CReset component will provide all the needed css reset styles to make sure all the Chakra UI components work correctly.

Boot up the project using the following command.

yarn serve

🎉 Awesome job so far! Let's take a moment to check out this beautiful project!

The real work starts now by adding a custom theme! 💅

Inside the assets folder we have created a new folder for our themes and created a Javascript file for the custom theme. We can call it whatever we want or be boring and use custom-theme.js.

Since we only will play around with custom colors, we only added those to the theme object.

When defining a palette we have to consider to keep the same object structure (primary-1, ..., primary-4) to have it interchangeable later on in the project.

Now that we have some pretty palettes inside the new custom theme object we have to let Chakra UI know we want to extend its default theme with our custom theme.

Inside the main.js file we have to pass our custom theme object in the extend theme option.

Let's build the grid displaying our custom palettes now! 🎉

As we dive into Charka UI we find two interesting components for grid building. We will keep it simple and use the simpleGrid (https://vue.chakra-ui.com/simplegrid) component.

Yaay now everything is green... Don't worry it's what we need for now!
So this grid makes 4 columns of a full screen height.
Let's now change this green screen and add a palette in there.

The only thing we do have to change is the style prop background. We can shorten background to bg if you would prefer to type less.

The value for this prop will be our first color palette added as following.

Let's check out our grid, got to say it looks amazing right?!

Toggle please?

Ok, now we should see how we can dynamically change the style props value, so we can toggle between the pallets.

First, we put our grid to the background and place a button to switch palettes on top of it.

So we now have a blue button on top of our palette grid. I'm sure there are other ways to get that blue button in the center of the screen, but this is the way I'm sticking with now. Feel free to add your own implementation here! 💪

When the user clicks the button it should change to a new palette.

Inside the template we add the @click directive and call a newly added changePalette method.

Inside this method we start with setting the currentPalette to another one, for example bamboo beach. 🐼

If we now press our blue button we see that value of currentPalette has been changed to 'bambooBeach'. Now we only have to make sure this also changes in the Styled props of the grid!

This can be done by dynamically binding our value of currentPalette to the bg styled prop.

You may notice the string concatenation in there, this is added since only the currentPalette is different.

Let's make the palette picking random for the fun! 🤪

Firstly we need a list of all our palettes to pick a random palette from.

Then we need a random number between 0 and the last index of the paletteList, so we can pick a palette at a random index in the array.

Who wants to see the same palette twice? Not me! 🙅‍♂️ To avoid this we have to add a little check.

If the random number obtained is less than the lastRandom, it can be used as is. Otherwise it has to be incremented by one, so that the lastRandom has been skipped.

It's really interesting that it's is possible for any styled prop value that can be set inside the custom theme. So we can make for example our own "black & white" mode.

Now let's smash that button and have fun! 🎉

❤️ Contribute to this blog

Having any questions, caught a mistake or have tips? Please reach out to me!