Component Showcard

A highly customizable card component for showcasing UI elements with gradients, badges, and interactive previews.

Preview

Awesome Component

New

This is a beautiful component showcase card with a gradient background.

View

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/component-showcard.json
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.

Card 1

First card in the grid

View

Card 2

Second card in the grid

View

Badges

Success Badge

New

Using success variant

View

Info Badge

Popular

Using info variant

View

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

View
components/ui/component-showcard.tsx
2 lines
1
2
Error reading file: /components/ui/component-showcard.tsx
Error: ENOENT: no such file or directory, open '/vercel/path0/components/ui/component-showcard.tsx'

Props

PropTypeDefaultDescription
title*stringThe title of the card
description*stringA short description displayed below the title
hrefstringLink destination for the card action
gradientstringfrom-blue-500/10 to-purple-500/10Tailwind gradient classes for the preview background
badgestringText to display in the badge
badgeVariant'default' | 'success' | 'warning' | 'info'defaultVisual style of the badge
copyCodestringText content to be copied when copy button is clicked
animatebooleantrueEnable entrance animations
animationDelaynumber0Delay in seconds for the entrance animation