Card

Displays a card with header, content, and footer.

Basic Card

A simple card with header, content, and footer sections.

Notifications

You have 3 unread messages.

Your recent notifications will appear here. Stay up to date with the latest updates from your team.

Card with Form

Cards can contain form elements for user input.

Create Project

Deploy your new project in one click.

Multiple Cards

Cards in a grid layout showing different content.

Total Revenue

January - DATE

$45,231.89

+20.1% from last month

Subscriptions

Active subscribers

+2,350

+180.1% from last month

Active Now

Current online users

+573

+201 since last hour

Card with Badge

Cards combined with badges for status indicators.

API Key

Active

Manage your API key and permissions.

Key IDkey_...x4f2
CreatedDATE
Last used2 hours ago

Custom Styling

Cards can be customized with additional classes.

Info

This is an informational card with custom blue styling.

Success

This is a success card with custom green styling.

Open Markdown
FreeCard

Composable content containers.

Install with the Proa CLI
proa ui add card

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Card recipe — static named slots for a composable card surface.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

mod base {
    use super::*;

    pub const ROOT: &str = tw_join!(
        "rounded-xl",
        "border",
        "bg-card",
        "text-card-foreground",
        "shadow-sm"
    );
    pub const HEADER: &str = tw_join!("flex", "flex-col", "gap-1.5", "p-6");
    pub const TITLE: &str = tw_join!("leading-none", "font-semibold", "tracking-tight");
    pub const DESCRIPTION: &str = tw_join!("text-sm", "text-muted-foreground");

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal