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.

Rby reshaped

Install

npx @21st-dev/cli add reshaped/reshaped-card

Loading preview...

import { Divider, 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 padding={0}>
          <View padding={4}>
            <View height={10} backgroundColor="neutral-faded" />
          </View>
          <Divider />
          <View padding={4}>
            <View height={10} backgroundColor="neutral-faded" />
          </View>
          <Divider />
          <View padding={4}>
            <View height={10} backgroundColor="neutral-faded" />
          </View>
        </Card>
      </div>
    </Reshaped>
  );
}