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!

Loading...

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.

Loading...

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.

Loading...

With Table

Check out the lowdown with all the deets laid out.

Loading...

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
  className='mb-6'
  title="List Daemons"
  description="List of daemons to use in your sites."
/>

For table docs, check out the Table docs.

Get premium Blocks
Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.