Reshaped Card

An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section composition with dividers, bleed and height control.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Card to your project and fits it to your theme.

import { Reshaped, View } from "reshaped/bundle";
import Card from "@/components/ui/reshaped-card";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 520, width: "100%", margin: "0 auto", padding: 24 }}>
        <Card bleed={4}>
          <View height={10} backgroundColor="neutral-faded" />
        </Card>
      </div>
    </Reshaped>
  );
}