Cards Block

Standard information card with icon badge, heading title, descriptive copy, primary CTA button, and secondary link.

>npx @shavin/ui add card-feature-action

New Feature

Connect your software tools to automated AI agents. Trigger multi-step workflows automatically on repository changes.

When to Use & Guidelines

Use for feature showcases, product capability highlights, or onboarding card grids.
Maintains consistent icon dimensions and standard button hierarchy.

Editorial card with image cover, category tag, title, author avatar metadata, and quick bookmark action.

>npx @shavin/ui add card-media-hero

Architecture

@shavin/ui Spec Guide

Decouple theme-independent foundation palettes from role-based semantic variables for zero-breakage runtime custom property mutations.

Avinash Bussa

When to Use & Guidelines

Ideal for blog posts, documentation tutorials, media galleries, and editorial content grids.

Data metric tile featuring bold KPI values, percentage trend indicator badge, and progress completion bar.

>npx @shavin/ui add card-stat-kpi

Active Subscribers

+18.4%

14,280

Monthly Goal (15k)

95%

When to Use & Guidelines

Use for dashboard overview tiles, business metric summaries, and real-time status trackers.

Member profile card displaying user avatar, online status badge, bio text, and primary contact/follow action buttons.

>npx @shavin/ui add card-user-profile

@mayasharma · Lead Product Designer

Building accessible design systems & zero-hallucination AI components for enterprise web applications.

When to Use & Guidelines

Use in team directories, community member lists, user settings modals, and author bios.

Card using <Inset> primitive to clip an edge-to-edge header banner with bullet features and footer actions.

>npx @shavin/ui add card-inset-banner

Enterprise Plan

Popular

Unlimited team seats, dedicated MCP server deployment, zero-hallucination AI agents, and custom brand theme presets.

24/7 Priority Dedicated Support

Unlimited AI Workspace Tokens

$99 / mo

When to Use & Guidelines

Use <Inset> to attach flush header images or footer action bars without fighting card inner paddings.