Create a Card Variant in shadcn/ui

[00:00 - 00:16] In the previous models, you've learned about variants and the shadcn/ui way uses variants to style the components. In this lesson, you are going to learn how to create a new variant for the card component based on the card you are rendering in the new events application.

[00:17 - 00:27] The variant will make the card have a BG-MU-TED/25, which is 25% opacity background. The first step in creating a variant is figuring out the baseline.

[00:28 - 00:39] The common part will follow the multiple different variants. So let's go to the card component and copy its current class name.

[00:40 - 00:55] This one. Let's call it baseline class name.

[00:56 - 01:17] Let's create the initial variant import the CVA function from the class variance authority, library, and the variant props the finish from the same library. The CVA function receives string for the first argument, which is the baseline, and an object with the other variants for the second argument.

[01:18 - 01:56] So const card variants equals CVA with rounded LG border, and we'll apply the baseline class name to it. And the second argument, which is an object, now add a two different variants under the variant property, default, which will have a BG card, which is the current background, and a ghost, which is the new variant we are creating with the BG-MU-TED/25 class name.

[01:57 - 02:11] The object also receives a default variant, so let's add it, and we'll select the default variant. Now you need to apply the CVA function into the component.

[02:12 - 02:26] The CVA function actually returns a function that you can call with your desired variant. You can call it with a combination of the same function in the class name prop of the card component, so the card variance is a function.

[02:27 - 02:36] That returns a string, it simply returns the class name. Given the variant that you are passing to it.

[02:37 - 02:56] So change the card component, and in the class name instead of CN and the current baseline class name, pass the card variance, function call, and pass the variant. Keep the class name, because we still want to allow users to override it.

[02:57 - 03:03] And add the variant as prop. Now we need to change the card prop.

[03:04 - 03:32] So let's create a new tie. It will extend react HTML attributes, or an HTML development, which is the card element tag, and the variant props, with the type of card variance.

[03:33 - 03:46] HD inside of the forward ref function to be card props. Great.

[03:47 - 03:55] Now let's go to the event item component, and apply the new ghost variant to all the cards that we are rendering. So find the card, for example, this.

[03:56 - 04:15] We can remove the bg-muted class name, and pass the variant ghost. You can do the same for the event details card, and for the event registration card.

[04:16 - 04:27] Now go back to the app, make sure it's running, and you can see that the card here is being rendered in the same style that we had in the previous lesson. But the class name being applied through the variant.

[04:28 - 04:38] Now you've created a new variant for the card component, and applied to the card components in the event item component. In the next module, you're going to learn about forms in shadcn/ui.