Component Showcard
A highly customizable card component for showcasing UI elements with gradients, badges, and interactive previews.
Preview
Awesome Component
NewThis is a beautiful component showcase card with a gradient background.
Installation
Use the CLI to add this component to your project.
Note: This is a custom component. You need to copy the source code manually if not using the CLI.
Examples
Grid Layout
Use ShowcardGrid to arrange multiple cards neatly.
Copy Code Button
Pass copyCode prop to show a copy button on hover.
npm install super-package
Copy Me
Hover over the preview area to see the copy button
components/ui/component-showcard.tsx
2 lines
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | The title of the card | |
description* | string | A short description displayed below the title | |
href | string | Link destination for the card action | |
gradient | string | from-blue-500/10 to-purple-500/10 | Tailwind gradient classes for the preview background |
badge | string | Text to display in the badge | |
badgeVariant | 'default' | 'success' | 'warning' | 'info' | default | Visual style of the badge |
copyCode | string | Text content to be copied when copy button is clicked | |
animate | boolean | true | Enable entrance animations |
animationDelay | number | 0 | Delay in seconds for the entrance animation |