Slide Card

cards

Interactive slide reveal card with action drawer that expands on hover.

#card#slide#drawer#hover

Live Interactive Preview

Featured

Slide Horizon

Hover to trigger the seamless bottom slide drawer revealing contextual actions.

View Blueprint

Component Source Code

Select language in the dropdown

SlideCard.tsx

1'use client';
2
3import React from 'react';
4import { ArrowRight, Sparkles, Star } from 'lucide-react';
5
6export default function SlideCard() {
7  return (
8    <div className="group relative w-full max-w-xs sm:max-w-sm overflow-hidden rounded-2xl sm:rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-md transition-all duration-300 hover:shadow-xl">
9      <div className="flex items-center justify-between mb-4">
10        <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-950/60 text-blue-600 dark:text-blue-400">
11          <Sparkles className="h-4 w-4" />
12        </span>
13        <span className="flex items-center gap-1 text-xs font-semibold text-amber-500">
14          <Star className="h-3.5 w-3.5 fill-amber-500" /> Featured
15        </span>
16      </div>
17      <h3 className="text-base font-bold text-slate-900 dark:text-slate-100">Slide Horizon</h3>
18      <p className="mt-1 text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
19        Hover to trigger the seamless bottom slide drawer revealing contextual actions.
20      </p>
21      <div className="mt-6 flex items-center justify-between border-t border-slate-100 dark:border-slate-800/80 pt-4">
22        <span className="text-xs font-bold text-blue-600 dark:text-blue-400">View Blueprint</span>
23        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 transition-transform duration-300 group-hover:translate-x-1">
24          <ArrowRight className="h-3.5 w-3.5" />
25        </div>
26      </div>
27    </div>
28  );
29}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/cards/SlideCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import SlideCard from '@/components/cards/SlideCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <SlideCard />
7    </main>
8  );
9}