 components come with several different animations built-in.

 component, you can see that the animations are defined on the component level:

<SelectPrimitive.Content
  className={
    "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
  }
></SelectPrimitive.Content>

, you can notice the classes responsible for its animations:

 to make it easier to style the different component states.

The primitive HTML elements will have an attribute like 

 that can be used to style the component based on its state.

 combines Radix UI primitives state with tailwind utility classes and a special tailwind plugin called 

 for animating HTML elements, but it's pretty limited. The available animations are 

The animations we include by default are best thought of as helpful examples.

It offers a more robust way to keep enjoying 

 while creating more complex animated components.
The 

 template comes with the plugin configured, but you can enable it by first installing:

---
title: Animations in shadcn/ui
description: Learn how to use animations in shadcn/ui
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/newsly/04.04-animations?ref_type=heads
privateVideoUrl: https://stream.mux.com/o6og8fqGugvfP9XDCfXoN102c9EAaFZl7B4Ffz5Mg00B00.m3u8
---

## Animations in shadcn/ui

`shadcn/ui` components come with several different animations built-in.

For example, the [select](https://ui.shadcn.com/docs/components/select) component in and out animations:

![select-animation](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_04/lesson_04.05/public/assets/select.gif)

### Behind the Scenes

Looking into the [source code](https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/select.tsx#L78) of `shadcn/ui` `Select` component, you can see that the animations are defined on the component level:

```javascript
<SelectPrimitive.Content
  className={
    "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
  }
></SelectPrimitive.Content>
```

It's a bit long, but looking into the `SelectPrimitive.Content` `className`, you can notice the classes responsible for its animations:

-   `data-[state=open]:animate-in`
-   `data-[state=closed]:animate-out`
-   `data-[state=closed]:fade-out-0`
-   `data-[state=open]:fade-in-0`
-   `data-[state=closed]:zoom-out-95`
-   `data-[state=open]:zoom-in-95`
-   `data-[side=bottom]:slide-in-from-top-2`

:::info

**What is this data attribute?**

The _data-[state=open/closed]_ or _data-[side=bottom]_ are automatically applied by **Radix UI** to make it easier to style the different component states.

The primitive HTML elements will have an attribute like `data-state="open"` or `data-side="bottom"` that can be used to style the component based on its state.

> When components are stateful, their state will be exposed in a data-state attribute. For example, when an Accordion Item is opened, it includes a data-state="open" attribute.
>
> [Radix UI Docs](https://www.radix-ui.com/primitives/docs/guides/styling#data-attributes)

Eyal Cohen

Animations in shadcn/ui

Shatzien UI components come with several different animations built in.

For example, the Select component in and out animation.

Looking into the source code of Shatzien UI Select component, you can see that

It's a bit long, but looking into the Select Primitive Content class name, you

the class is responsible for its animations.

The data state open animating and the data state closed animate out.

The data state closed an open fade out and fade in.

The data attribute is managed by radix and set on the HTML attribute level when

I'm opening the Select component in Shatzien UI Docs.

You can see how the data state on the button changes from close to open.

Open the DevTools, click on Right Click and Inspect.

Go to the Element tab if you're another and click on the Locate and then Locate

Notice the Data State attribute on the HTML element.

When I'll open it, you can see the disease changed to open.

It's now open and when I click it changed to closed.

By using Tailwind feature for enabling and disabling classes based on the data

the class names will be applied only when the attribute, the data attribute is

the value on the other side of the equation.

Shatzien UI combines radix UI primitives like the Select content we saw with

Tailwind default animations are pretty limited.

It's supporting spin, pulse, bounce and ping.

But there's a spatial tailwind plugin called Tailwind CSS Animate.

For example, the anime team in Animate Out and fade and zoom classes that we

You can explore this Tailwind CSS Animate Docs to see the full list of

It takes three steps to add a custom animation to a Shatzien UI component,

definition in the Tailwind.config.js file, creating an animation definition in

file as well and adding the animation to the component.

So now let's add a new animation to the news layer.

We'll start by adding a keyframe definition to Tailwind.config.js.

And navigate to the Tailwind.config.js file.

Now go to keyframes and add the Wiggle keyframe definition.

Now the next step would be to add the animation definition.

You've added a keyframe and now it's time to add the animation extension for

The last step is to add the Wiggle animation to some components.

So I've chosen the sheet title component in the article link component.

So open the article link component, go to sheet title and add the animate W

You can click on one of the articles on the side.

You can see that the title is now being animated.

Now how do you customize the animations of Shatzien UI component?

Let's say we want to make the sheet animation spin in and out instead of fade

So open again the article link component and update the class name of the sheet

with the data state closed spinout 6 and the data state opens spinning6 class

And to sheet content now add the data state closed and data state open class

And when you open you can see that the sheet is now being spin in and out from

If we remove it, if we remove the classes that we just added then animation

In this module you've learned about Shatzien UI animations.

In the next lesson you'll have an exercise for building new styles in Shatzien

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript