A shadcn/ui inspired Blazor component library

Installation

Add the Card component using the CLI:

shadcnblazor component add card

Usage

Displays a card with header, content, and footer. Use Header, ChildContent, and Footer child content to compose the card. When Header or Footer are provided, they render as distinct sections with borders and consistent padding.

Login to your account

Enter your email below to login to your account

Email

Password

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<Card Class="w-[350px]">
    <Header>
        <h3 class="text-lg font-semibold">Login to your account</h3>
        <p class="text-sm text-muted-foreground">Enter your email below to login to your account</p>
    </Header>
    <ChildContent>
        <div class="space-y-4">
            <div class="space-y-2">
                <label for="email" class="text-sm font-medium">Email</label>
                <Input id="email" Type="email" Placeholder="m@example.com" />
            </div>
            <div class="space-y-2">
                <div class="flex items-center justify-between">
                    <label for="password" class="text-sm font-medium">Password</label>
                    <Button Variant="@Variant.Link" Size="@Size.Sm" Class="px-0 text-xs">Forgot your password?</Button>
                </div>
                <Input id="password" Type="password" />
            </div>
        </div>
    </ChildContent>
    <Footer>
        <div class="flex flex-col gap-2 w-full">
            <Button Variant="@Variant.Default" Class="w-full">Login</Button>
            <Button Variant="@Variant.Outline" Class="w-full">Login with Google</Button>
        </div>
    </Footer>
</Card>

Examples

Header and Footer

Header and Footer are optional child content slots. When provided, they render as distinct sections above and below the main content, each with a border separator and padding derived from the card's Size.

Customize each section with HeaderClass, ContentClass, and FooterClass. These apply only when the corresponding slot is used. For example, HeaderClass="p-0" removes header padding for a full-bleed image, and ContentClass="p-0" removes content padding for edge-to-edge content.

HeaderClass="bg-muted/50"

Custom header background

The header uses a muted background.

Default content padding.

ContentClass="p-0"

Edge-to-edge content

Content has no padding.

Full-width area

FooterClass="justify-between"

Footer alignment

Footer content is spread apart.

Card content.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<div class="flex flex-col gap-6 w-fit">
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">HeaderClass="bg-muted/50"</p>
        <Card Class="w-[350px]" HeaderClass="bg-muted/50">
            <Header>
                <h3 class="text-lg font-semibold">Custom header background</h3>
                <p class="text-sm text-muted-foreground">The header uses a muted background.</p>
            </Header>
            <ChildContent>
                <p class="text-sm text-muted-foreground">Default content padding.</p>
            </ChildContent>
            <Footer>
                <Button Variant="@Variant.Outline">Action</Button>
            </Footer>
        </Card>
    </div>
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">ContentClass="p-0"</p>
        <Card Class="w-[350px]" ContentClass="p-0">
            <Header>
                <h3 class="text-lg font-semibold">Edge-to-edge content</h3>
                <p class="text-sm text-muted-foreground">Content has no padding.</p>
            </Header>
            <ChildContent>
                <div class="h-24 bg-muted/30 flex items-center justify-center text-sm text-muted-foreground">Full-width area</div>
            </ChildContent>
            <Footer>
                <Button Variant="@Variant.Default">Action</Button>
            </Footer>
        </Card>
    </div>
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">FooterClass="justify-between"</p>
        <Card Class="w-[350px]" FooterClass="justify-between">
            <Header>
                <h3 class="text-lg font-semibold">Footer alignment</h3>
                <p class="text-sm text-muted-foreground">Footer content is spread apart.</p>
            </Header>
            <ChildContent>
                <p class="text-sm text-muted-foreground">Card content.</p>
            </ChildContent>
            <Footer>
                <Button Variant="@Variant.Link">Cancel</Button>
                <Button Variant="@Variant.Default">Save</Button>
            </Footer>
        </Card>
    </div>
</div>

Size

Use the Size parameter set to CardSize.Sm for a more compact card. The small size variant uses smaller spacing.

Small Card

This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

1

2

3

4

5

6

7

8

9

<Card Size="@CardSize.Sm" Class="w-[350px]">
    <Header>
        <h3 class="text-lg font-semibold">Small Card</h3>
        <p class="text-sm text-muted-foreground">This card uses the small size variant.</p>
    </Header>
    <ChildContent>
        <p class="text-sm text-muted-foreground">The card component supports a size prop that can be set to "sm" for a more compact appearance.</p>
    </ChildContent>
</Card>

Image

Add an image in the Header slot to create a card with an image. Use HeaderClass="p-0" for a full-bleed image.

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

Featured

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<Card Class="w-[350px]" HeaderClass="p-0">
    <Header>
        <img src="https://placehold.co/400x200" alt="Event cover" class="aspect-video w-full object-cover rounded-t-xl" />
    </Header>
    <ChildContent>
        <div class="flex items-start justify-between gap-2">
            <div>
                <h3 class="text-lg font-semibold">Design systems meetup</h3>
                <p class="text-sm text-muted-foreground">A practical talk on component APIs, accessibility, and shipping faster.</p>
            </div>
            <Badge Variant="@Variant.Secondary">Featured</Badge>
        </div>
    </ChildContent>
    <Footer>
        <Button Variant="@Variant.Default" Class="w-full">View Event</Button>
    </Footer>
</Card>

Variants

Use the Variant parameter to switch between Default (card background) and Outline (transparent with border).

Default

Uses the card background color.

Outline

Transparent background with border.

1

2

3

4

5

6

7

8

9

10

<div class="flex flex-col gap-4 w-fit">
    <Card Variant="@CardVariant.Default" Class="w-[350px] gap-2">
        <h3 class="text-lg font-semibold">Default</h3>
        <p class="text-sm text-muted-foreground">Uses the card background color.</p>
    </Card>
    <Card Variant="@CardVariant.Outline" Class="w-[350px] gap-2">
        <h3 class="text-lg font-semibold">Outline</h3>
        <p class="text-sm text-muted-foreground">Transparent background with border.</p>
    </Card>
</div>

API Reference

Card

A container card with optional header and footer sections.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`ChildContent`	`RenderFragment`	The main content of the card.
`Class`	`string`
`ContentClass`	`string`	Additional CSS classes for the content section.
`Footer`	`RenderFragment`	Optional footer content rendered below the main content.
`FooterClass`	`string`	Additional CSS classes for the footer section.
`Header`	`RenderFragment`	Optional header content rendered above the main content.
`HeaderClass`	`string`	Additional CSS classes for the header section.
`Size`	`CardSize`	The size/spacing of the card sections.
`Variant`	`CardVariant`	The visual style variant of the card.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.