Navigational Card
NavigationalCard is an interactive UI component designed for linking sections or pages. It combines iconography, concise text, and subtle hover animations to create clear and engaging navigation elements in dashboards, docs, and landing pages.
Installation
Install with CLI
Choose your package manager.
npx @praveenlodhi/elixir-ui add navigational-cardpnpm dlx @praveenlodhi/elixir-ui add navigational-cardyarn dlx @praveenlodhi/elixir-ui add navigational-cardbun x @praveenlodhi/elixir-ui add navigational-cardInstall dependencies
npm install lucide-react clsxpnpm add lucide-react clsxyarn add lucide-react clsxbun add lucide-react clsxCreate component file
Create a file at components/ui/navigational-card.tsx and paste the source.
"use client";
import Link from "next/link";
import clsx from "clsx";
import { ArrowRightIcon, BookOpenIcon } from "lucide-react";
import { Card, CardContent, CardDescription, CardTitle } from "./card";
export interface NavigationalCardProps {
title?: string;
description?: string;
icon?: React.ReactNode;
trailingIcon?: React.ReactNode;
href?: string;
className?: string;
}
export function NavigationalCard({
title = "Navigational Card",
description = "This is a description for the navigational card. It can be a brief summary or key information.",
icon = <BookOpenIcon />,
trailingIcon,
href = "#",
className,
}: NavigationalCardProps) {
return (
<Link
href={href}
className={clsx("group max-w-85 no-underline", className)}
>
<Card className="flex h-fit justify-center">
<CardContent className="grid grid-cols-[auto_1fr_auto] items-center gap-4">
{icon && (
<div className="bg-muted flex aspect-square size-full items-center justify-center rounded-md">
{icon}
</div>
)}
<div className="space-y-1">
<CardTitle>{title}</CardTitle>
<CardDescription className="line-clamp-2 text-[13px] font-normal">
{description}
</CardDescription>
</div>
{trailingIcon && (
<div
className={clsx(
"flex items-center justify-center",
"transition-all duration-200",
"group-hover:translate-x-1 group-hover:-rotate-45 group-hover:opacity-100"
)}
>
{trailingIcon}
</div>
)}
</CardContent>
</Card>
</Link>
);
}Usage
import { BookOpenIcon } from "lucide-react";
import { NavigationalCard } from "@/components/ui/navigational-card";
export default function DemoPage() {
return (
<NavigationalCard
title="Introduction"
href="#introduction"
description="Learn about Elixir UI and how to get started."
icon={<BookOpenIcon className="size-fit" />}
/>
);
}