Card

Destroyable Card

npx shadcn@latest add https://ui.sikka.io/r/destroyable-card.json

pnpm dlx shadcn@latest add https://ui.sikka.io/r/destroyable-card.json

bunx --bun shadcn@latest add https://ui.sikka.io/r/destroyable-card.json

Usage

The DestroyableCard component provides a dismissible card with smooth animations and flexible positioning.

import { DestroyableCard } from "@/components/naseem-ui/elements/destroyable-card"

export default function Example() {
  return (
    <DestroyableCard position="bottom-right" fixed>
      <div>Your content here</div>
    </DestroyableCard>
  )
}

Features

Smooth destroy animation with fade-out
Configurable position (bottom-right or bottom-left)
Fixed or relative positioning
RTL language support
Accessible close button
Built on Radix UI Card components

Implementation

The component uses:

React state for animation control
setTimeout for delayed removal
Radix UI Card components for base styling
Tailwind CSS for transitions and positioning
SVG for close icon

Props

Prop

Type

Dependencies

{
  "@radix-ui/react-card": "latest",
  "react": "latest",
  "tailwindcss": "latest"
}