Card

iconiq-ui/card

FreeComponent

Compound card surface with optional interactive lift, Motion-smoothed layout transitions, asChild link support, semantic title slots, and shared header, action, content, and footer slots.

Live preview

live · rendered by the registry

Rendered by Iconiq UI on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://www.iconiqui.com/r/card.json

Source

card.tsxwww.iconiqui.com/r/card.json · first 6 KB

1"use client";
2 
3import { Slot } from "@radix-ui/react-slot";
4import {
5  type MotionStyle,
6  motion,
7  useMotionValue,
8  useReducedMotion,
9  useSpring,
10  useTransform,
11} from "motion/react";
12import Image, { type ImageProps } from "next/image";
13import * as React from "react";
14 
15import { cn } from "@/lib/utils";
16 
17const componentThemeClassName =
18// … truncated

What it pulls in

npm packages

motion
@radix-ui/react-slot

Files it writes

card.tsx

More from Iconiq UI

All 119 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	Iconiq UI	Components	Free	2 deps
AI Inputai-input	Iconiq UI	Components	Free	3 deps
Alertalert	Iconiq UI	Components	Free	2 deps
Avataravatar	Iconiq UI	Components	Free	3 deps
Accordion (Base UI)b-accordion	Iconiq UI	Components	Free	2 deps
Alert Dialog (Base UI)b-alert-dialog	Iconiq UI	Components	Free	3 deps
Autocomplete (Base UI)b-autocomplete	Iconiq UI	Components	Free	3 deps
Avatar (Base UI)b-avatar	Iconiq UI	Components	Free	2 deps