Card

Container component with 5 variants: default, bordered, elevated, highlight, and ghost. The building block for content sections.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "poyraz-ui/atoms";

Default

Standard dashed-border card.

Project Alpha

A brutalist design system

Card content goes here.

<Card>
  <CardHeader>
    <CardTitle>Project Alpha</CardTitle>
    <CardDescription>A brutalist design system</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button size="sm">View Details</Button>
  </CardFooter>
</Card>

Variants

All 4 non-default card variants.

Bordered

High contrast border

Bold slate-900 border for stronger visual presence.

Elevated

Red offset shadow

Brutalist offset shadow with a red box behind.

Highlight

Left red accent

Red left border stripe draws attention to important content.

Ghost

No border

Transparent background with no borders.

<Card variant="bordered">...</Card>
<Card variant="elevated">...</Card>
<Card variant="highlight">...</Card>
<Card variant="ghost">...</Card>

Interactive

Clickable card with subtle hover lift. Use for links and navigable items.

Interactive Card

Hover to see the lift effect

Subtle upward translate and border darkening on hover.

<Card variant="interactive">
  <CardHeader>
    <CardTitle>Interactive Card</CardTitle>
    <CardDescription>Hover to see the lift effect</CardDescription>
  </CardHeader>
</Card>

ArticleCard

Blog/article card with image, category, title, excerpt, and author info.

React

Building Minimal Design Systems

A deep dive into creating clean, composable UI components with Tailwind CSS and Radix primitives.

Poyraz Avsever·Mar 2026·4 min

import { ArticleCard } from "poyraz-ui/molecules";

<ArticleCard
  image="https://picsum.photos/seed/article/600/340"
  category="React"
  title="Building Minimal Design Systems"
  excerpt="A deep dive into creating clean, composable UI components with Tailwind CSS and Radix primitives."
  author={{ name: "Poyraz Avsever", avatar: "https://i.pravatar.cc/40?img=3" }}
  date="Mar 2026"
  readTime="4 min"
  href="#"
/>

ImageCard

Image-dominant card with gradient overlay and text. Perfect for galleries and featured content.

Featured

Sunset Over the Mountains

Captured during a hiking trip in the Swiss Alps.

import { ImageCard } from "poyraz-ui/molecules";

<ImageCard
  image="https://picsum.photos/seed/img/600/450"
  title="Sunset Over the Mountains"
  description="Captured during a hiking trip in the Swiss Alps."
  badge="Featured"
  href="#"
/>

NewsCard

Compact horizontal news card. Ideal for news feeds and list layouts.

Technology

import { NewsCard } from "poyraz-ui/molecules";

<NewsCard
  image="https://picsum.photos/seed/news/200/200"
  category="Technology"
  title="Next.js 16 Released with Major Performance Improvements"
  date="Mar 6, 2026"
  href="#"
/>

StatsCard

Metric/KPI display card with optional icon and trend indicator.

Revenue

$12,345

+12.5%

Users

1,234

-3.2%

Orders

—0%

import { StatsCard } from "poyraz-ui/molecules";

<StatsCard label="Revenue" value="$12,345" trend="up" trendValue="+12.5%" />
<StatsCard label="Users" value="1,234" trend="down" trendValue="-3.2%" />
<StatsCard label="Orders" value="89" trend="neutral" trendValue="0%" />

TestimonialCard

Customer testimonial card with quote, author info, and optional rating.

“

Poyraz UI's minimal approach saved us weeks of design work. The components are clean, accessible, and easy to customize.

Ahmet Y.

Frontend Lead at TechCo

import { TestimonialCard } from "poyraz-ui/molecules";

<TestimonialCard
  quote="Poyraz UI's minimal approach saved us weeks of design work. The components are clean, accessible, and easy to customize."
  author="Ahmet Y."
  role="Frontend Lead at TechCo"
  avatar="https://i.pravatar.cc/40?img=12"
  rating={5}
/>

PricingCard

Pricing tier card with features list and CTA slot. Use highlighted for the recommended plan.

Free

$0/month

Great for getting started.

3 projects
Community support
Basic analytics

Pro

$29/month

Everything you need to scale.

Unlimited projects
Priority support
Advanced analytics
API access

import { PricingCard } from "poyraz-ui/molecules";
import { Button } from "poyraz-ui/atoms";

<PricingCard
  title="Pro"
  price="$29"
  period="month"
  description="Everything you need to scale."
  features={["Unlimited projects", "Priority support", "Advanced analytics", "API access"]}
  highlighted
  action={<Button className="w-full">Get Started</Button>}
/>

ProductCard

E-commerce product card with image, price, rating, and action slot.

Sale

Minimal Desk Lamp

$49$79

New

Wireless Keyboard

$129

USB-C Hub Pro

$89

import { ProductCard } from "poyraz-ui/molecules";
import { Button } from "poyraz-ui/atoms";

<ProductCard
  image="https://picsum.photos/seed/product/400/400"
  title="Minimal Desk Lamp"
  price="$49"
  originalPrice="$79"
  rating={4}
  badge="Sale"
  action={<Button size="sm" className="w-full">Add to Cart</Button>}
/>