# Dither Credit Card — Skecher UI

A responsive payment card with an animated two-color dither field, selectable pointer physics, and carefully scaled card details.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/dither-credit-card
```

## Dependencies

- @paper-design/shaders-react
- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { DitherCreditCard } from "@/components/ui/dither-credit-card";

export default function DitherCreditCardExample() {
  return (
    <div className="flex min-h-96 items-center justify-center p-6">
      <DitherCreditCard className="w-full max-w-[605px]" />
    </div>
  );
}
```

## Source files

- components/ui-components/dither-credit-card.tsx — Dither Credit Card component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/dither-credit-card
- Registry item with complete source: https://skecher-ui.com/r/dither-credit-card.json
- Component AI context: https://skecher-ui.com/llms/dither-credit-card