Components

Card

A flexible UI container that groups related content, actions, and media in a structured and visually appealing layout.

Basic

Top spots to hit in 2024, no cap!

Monthly Report
Financial summary for June
The monthly financial report shows a 15% increase in revenue compared to last month.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Manual Installation

Anatomy

With Form

Sometimes, you may need a card with a form inside.

Login
Don't loose the level, just keep on going.
Forgot password?

Action

You can add actions to your card, which will be aligned to the right. This example demonstrates using the menu component, but you can use any component you prefer.

Customers
Manage and view customer details with available actions aligned to the right.

With Table

When you place a table inside a card, The table gutter inherits the padding from its parent card to ensure visual consistency.

Users
Manage users, groups, and roles.
#
Name
Gender
Age
Occupation
1John DoeMale30Software Engineer
2Jane SmithFemale25Marketing Manager
3Bob JohnsonMale40Doctor
4Emily ChenFemale28Teacher
5Michael BrownMale35Lawyer
6Sarah LeeFemale32Designer
7Kevin WhiteMale45CEO
8Lisa NguyenFemale29Engineer
9David KimMale38Consultant
10Hannah PatelFemale26Writer

For table docs, check out the Table docs.

Section Title

Sometimes, you may only need a card header without wrapping container itself. Of course, you need don't want the default padding, right? So I have prop called withoutPadding to help you out.

<CardHeader
  title="List Daemons"
  description="List of daemons to use in your sites."
/>

Adjust Padding

The padding for all sections of the card—header, content, and footer—is controlled by a CSS variable defined on the card’s parent container. To update the padding for the entire card, simply set the variable via a class on the parent like this:

<Card className='[--card-spacing:--spacing(2)'/>
Get premium blocksCreate stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.