Surfaces

Card

Cards are a flexible and extensible content container. They are commonly used within a page layout or as part of a related group of content.

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.

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Card comes packed with a variety of components to make it stand out.

Heading

Heading is a component used to display titles and subtitles, providing a clear structure and emphasis for organizing and presenting content.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

With Form

Peep this for a slick login setup, easy peasy.

Login

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

With Table

Check out the lowdown with all the deets laid out.

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

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.

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

For table docs, check out the Table docs.

Progress BarVisually Hidden