In the previous modules, you've learned about variants and the way 

In this lesson, you are going to create a new variant for the 

 component design you've created in the previous lessons.

The variant you are going to create will be used to style the 

 background color, meaning it will be muted with 25% of opacity.

 component, you'd need to figure out the baseline classNames first.

 component case, the baseline classNames are: 

rounded-lg border bg-card text-card-foreground shadow-sm

What you are looking to make a variant of is the 

Copy the baseline className, and first create the default card variants.

import { VariantProps, cva } from "class-variance-authority"

Then, call the function with the default classNames:

const cardVariants = cva("rounded-lg border text-card-foreground shadow-sm", {

 function accepts an options object as an argument. The object includes a 

---
title: Create a Card Variant in shadcn/ui
description: Create a new variant for the Card component in shadcn/ui
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/new-events/05.02-variant?ref_type=heads
privateVideoUrl: https://stream.mux.com/r0084JHZppPgvD1vm3bgFOi9bsVO3uZ9FWspF44aRf6I.m3u8
---

In the previous modules, you've learned about variants and the way `shadcn/ui` uses variants to style components.

In this lesson, you are going to create a new variant for the `Card` component - based on the `Card` component design you've created in the previous lessons.

![card-variant](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_05/lesson_05.05/public/assets/ghost-card.png)

The variant you are going to create will be used to style the `Card` component to have a `bg-muted/25` background color, meaning it will be muted with 25% of opacity.

Navigate to the `Card` component file.

To create a `variant` of a `shadcn/ui` component, you'd need to figure out the baseline classNames first.

In the `Card` component case, the baseline classNames are: `rounded-lg border bg-card text-card-foreground shadow-sm`.

What you are looking to make a variant of is the `bg-card` class.

Copy the baseline className, and first create the default card variants.

Import the `cva` function:

```javascript { actualFilename=../../code/new-events/05.02-variant/components/ui/card.tsx endLine=2 startLine=2 statedFilename=components/card.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_05/lesson_05.05/.../code/new-events/05.02-variant/components/ui/card.tsx#L2 }
import { VariantProps, cva } from "class-variance-authority"
```

Then, call the function with the default classNames:

```javascript { actualFilename=../../code/new-events/05.02-variant/components/ui/card.tsx endLine=6 startLine=6 statedFilename=components/card.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_05/lesson_05.05/.../code/new-events/05.02-variant/components/ui/card.tsx#L6 }
const cardVariants = cva("rounded-lg border text-card-foreground shadow-sm", {
```

The `cva` function accepts an options object as an argument. The object includes a `variants` object to define the variants.

Go ahead and add two variants: `default` and `muted`. The variants will control the `bg-<color>` class.

```javascript { actualFilename=../../code/new-events/05.02-variant/components/ui/card.tsx endLine=12 startLine=7 statedFilename=components/card.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_05/lesson_05.05/.../code/new-events/05.02-variant/components/ui/card.tsx#L7 }
  variants: {
    variant: {
      default: "bg-card",
      ghost: "bg-muted/25",
    },
  },
```

The `default` variant will be the default card style, and the `muted` variant will be the muted card style.

Eyal Cohen

Create a new variant for the Card component in shadcn/ui

Create a Card Variant in shadcn/ui

In the previous models, you've learned about variants and the way Shudsen UI

In this lesson you are going to learn how to create a new variant for the card

based on the card you are rendering in the new events application.

The variant will make the card have a BG muted /25% opacity background.

The first step in creating a variant is figuring out the baseline.

The common part of all the multiple different variants.

So let's go to the card component and copy its current class name.

And let's create the initial variant import the CVA function from the class

library and the variant props the definition from the same library.

The CVA function receives string for the first argument which is the baseline

object with the other variants for the second argument.

So const card variants = CVA with rounded lg border and we'll apply the

And the second argument which is an object now add the two different variants

variance property default which will have a BG card which is the current

a ghost which is the new variant we are creating with the BG muted /25% class

The object also receives a default variant so let's add it and we'll select the

Now you need to apply the CVA function into the component.

The CVA function actually returns a function that you can call with your

You can call it with a combination of the CIN function in the class name prop

So the card of variance is a function that returns a string.

Given the variant that you are passing tweet.

And the variant that you are passing tweet.

So change the card component and in the class name instead of CIN and the

class name, pass the card variants called function call and pass the variant.

Keep the class name because we still want to allow users to override it and add

It will extends /extends/react/html attributes or an HTML development which is

element tag and the variant props with a type of card variance.

Change the inside of the forward ref function to be card props.

Now let's go to the event item component and apply the new ghost variant to all

For example, we can remove the BGMU to the class name and pass a variant ghost.

You can do the same for the event details card and for the event registration

Make sure it's running and you can see that the card here is being rendered in

style that we had in the previous lesson but the class name being applied

Now you've created a new variant for the card component and applied to the card

In the next module you are going to learn about forms in Shudsea anyway.

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