Morphing Card
As you switch between states the card will change its appearance.
Examples
Basic Implementation of a delete card
This Creation will be chargable on your plan.
Morph Card with custom content
Create New Team
Set up a new team in your organization with customizable permissions and roles.
Installation
npx shadcn@latest add "https://aetherui.in/c/morphing-card.json"
Usage
You can customize the content of the morphing card by passing the following props to the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| customId | string | A unique identifier for the morphing card. | |
| children | ReactNode (Optional) | Content to be displayed inside the morphing card. | |
| className | string | Additional class names to be applied to the morphing card. | |
| icon | ReactNode (Optional) | Pencil Icon | Icon to be displayed in the morphing card. |
| iconClassname | string | Additional class names to be applied to the icon. | |
| title | string (Optional) | Title to be displayed in the morphing card. | |
| description | string (Optional) | Description to be displayed in the morphing card. | |
| cancelButtonText | string | Cancel | Text to be displayed on the cancel button. |
| confirmButtonText | string | Create | Text to be displayed on the confirm button. |
| dialogTitle | string (Optional) | Title to be displayed in the confirmation dialog. | |
| dialogDescription | string (Optional) | Description to be displayed in the confirmation dialog. | |
| dialogCancelText | string | Cancel | Text to be displayed on the cancel button in the confirmation dialog. |
| dialogConfirmText | string | Confirm | Text to be displayed on the confirm button in the confirmation dialog. |
| onConfirm | function (Optional) | Callback function to be called when the confirm button is clicked. | |
| variant | enum (Optional) | Default | Variant of the morphing card: Positive | Negative | Default. |
Credits
Credit for this component goes to Manu Arora and his amazing framer playlist.