DataCard

The DataCard is the flagship showcase component that demonstrates the full range of @mks2508/mks-ui patterns — slot overrides, state-based styling, CVA variants, motion animations, form integration, and glassmorphism effects.

Import

import {
  DataCard,
  DataCardValue,
  DataCardLabel,
  DataCardToggle,
  DataCardActions,
} from '@mks2508/mks-ui/react';

Features Demonstrated

• Slot overrides — Customize any visual region via slots prop
• State-based styling — Reactive styles for hover, pressed, disabled states
• CVA variants — Size and color variant combinations
• asChild composition — Compose with other elements using Slot pattern
• Motion/animation — Spring-based number counter animations via CountingNumber
• Custom render functions — Both className and style as functions of state
• Form field integration — Controlled Switch/toggle components
• Icon composition — Flexible slot support for icons
• Glassmorphism — Synthwave Dark theme effects with backdrop blur
• Corner brackets — Industrial-style corner decorations (auto-rendered)

Basic Usage

<DataCard>
<DataCardLabel title="Total Users" description="Active sessions" />
<DataCardValue number={1234} />
</DataCard>

Variants

Size Variants

With Toggle

<DataCard variant="accent">
<DataCardLabel title="Live Updates" description="Real-time sync" />
<DataCardValue number={256} unit="users" />
<DataCardToggle checked={true} label="Enabled" />
</DataCard>

Slot Overrides

Customize any visual region using the slots prop:

<DataCard
  slots={{
    root: 'border-cyan-400/50 shadow-cyan-500/30',
    bracket: 'opacity-80',
    value: 'text-cyan-300',
    toggle: 'justify-center',
  }}
  variant="accent"
>
  <DataCardValue number={999} />
  <DataCardToggle checked={true} />
</DataCard>

State-Based Styling

Pass functions for className or style to react to interaction state:

<DataCard
  className={(state) =>
    state.hovered ? 'scale-105 shadow-2xl' : 'scale-100'
  }
  style={(state) => ({
    transform: state.pressed ? 'scale(0.98)' : 'scale(1)',
  })}
>
  <DataCardValue number={1234} />
</DataCard>

State Object

Configuration

<DataCard
  config={{
    animateBrackets: true,
    counterStiffness: 200,
    counterDamping: 20,
  }}
>
  <DataCardValue number={42} />
</DataCard>

API Reference

DataCard

DataCardValue

DataCardLabel

DataCardToggle

DataCardActions

Slots