Plex UI

Card

Card surface for composing login flows, sign-up forms, pricing tiles, payment methods, empty states, and stat showcases.

import { Card } from "@plexui/ui/components/Card";

Examples

Overview

Project activity

Your team opened 12 issues and closed 8 pull requests over the last 7 days.

Login

Log in to your account

Enter your email below to log in to your account.

Don't have an account? Sign up

Create project

Create project

Deploy a new project in one-click with sensible defaults.

Where your functions and database will live.

Payment Method

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

No team members (empty state)

No team members
Invite your team to collaborate on this project.

How did you hear about us?

How did you hear about us?

Select the option that best describes how you heard about us.

Processing your request

Processing your request
Please wait while we process your request. Do not refresh the page.

Pricing

Starter

$0/ month

  • 1 project
  • Community support
  • Plex UI core

Pro

$19/ month

  • Unlimited projects
  • Priority support
  • Custom domains
  • Early components

Anatomy

<Card>
  <Card.Header>
    <Card.Title />
    <Card.Description />
    <Card.Action />  {/* optional top-right slot */}
  </Card.Header>
  <Card.Content />
  <Card.Footer />
</Card>

API

Card

PropTypeDefaultDescription
variant"outline" | "solid" | "ghost""outline"Visual variant
size"sm" | "md" | "lg""md"Padding scale
interactivebooleanfalseAdds hover and focus affordances. Automatic when href is set.
hrefstring—Renders the Card as a link via the configured LinkComponent.
externalbooleanauto-detectedForces target="_blank" and rel="noopener noreferrer" when href is set.
asComponentType | "a"—Overrides the link component (e.g. next/link).
classNamestring—Applied to the root element

All other <div> or <a> attributes are forwarded to the root.

Compound parts

PartElementPurpose
Card.Header<div>Title + description + optional action
Card.Title<h3>Card heading
Card.Description<p>Subtitle / explanation
Card.Content<div>Primary body region
Card.Footer<div>Trailing actions row
Card.Action<div>Absolute top-right slot inside Card.Header

Styling

Card reads these component tokens. Override them at any scope to restyle it:

  • --card-background: background (default var(--color-surface))
  • --card-background-hover: background hover (default var(--color-surface-secondary))
  • --card-border-color: border color (default var(--color-border))
  • --card-border-color-hover: border color hover (default var(--color-border-primary-outline-hover))
  • --card-description-color: description color (default var(--color-text-tertiary))
  • --card-description-font-size: description font size (default var(--font-text-sm-size))
  • --card-font-size: font size (default var(--font-text-sm-size))
  • --card-radius: radius (default var(--radius-xl))
  • --card-text-color: text color (default var(--color-text))
  • --card-title-color: title color (default var(--color-text))
  • --card-title-font-size: title font size (default var(--font-heading-xs-size))
  • --card-title-font-weight: title font weight (default var(--font-weight-semibold))

Related components

Stat CardStat card for dashboards displaying KPIs with trend deltas, an info tooltip, an icon, a progress bar, and accent border styling.Empty MessageEmpty state for telling users there's nothing to show, with error, warning, no-results, and onboarding compositions.AccordionVertically stacked panels that expand to reveal content, with one or several items open at a time and full keyboard navigation.

On this page

ExamplesOverviewLoginCreate projectPayment MethodNo team members (empty state)How did you hear about us?Processing your requestPricingAnatomyAPICardCompound partsStyling