astro-cards

v0.0.1

A collection of beautifully designed, standalone UI kit card components for Astro

_ _signor_p_ · 1 downloads · Updated 7/24/2026
astrocardsui-kitcomponentsrecipe
xnex install astro-cards GitHub repo

Astro Cards UI Kit Recipe

Astro Zero Dependencies TypeScript Ready UI Kit

Standalone, zero-dependency card components for Astro projects. Each card is copy-paste friendly, scoped with local styles, and designed to give developers strong visual variety without adding CSS framework baggage.

Why Use This Recipe?

Cards usually start simple, then slowly turn into one-off layout traps: a feature card needs a media slot, a dashboard tile needs a badge, a pricing teaser needs a footer action, and suddenly you are duplicating markup and CSS across pages.

This recipe keeps that under control:

  • Eight independent designs: Pick only the card styles your project actually needs.
  • Shared slot structure: Every card supports the same content regions, so swapping aesthetics does not force a markup rewrite.
  • Zero-CSS overrides: Adjust background, text, border, glow, accent, or shadow tones directly through props.
  • Scoped styles only: No global CSS leakage and no visual collisions with the rest of your app.
  • Polymorphic links: Pass href and the card renders as an accessible <a> instead of a plain <div>.
  • Real UX states: Interactive, selectable, loading, glass, glow, gradient, neon, and retro behaviors are ready out of the box.

What's Inside?

VariantComponent FileVisual Vibe
Basicbasic.card.astroVersatile product, dashboard, and content card foundation with multiple layout moods.
Glassglass.card.astroFrosted translucent overlay card for command centers, dashboards, and futuristic panels.
Neonneon.card.astroCyberpunk terminal-inspired card with glow, pulse, and tech-corner details.
Gradientgradient.card.astroVivid animated gradient card for launch panels, promos, and feature highlights.
Retroretro.card.astroNeo-brutalist poster card with strong contrast and tactile offset shadows.
Glowglow.card.astroPremium CTA card with border beam animation and ambient aura lighting.
Minimalminimal.card.astroDense editorial card for changelogs, lists, summaries, and clean product UI.
Interactiveinteractive.card.astroStateful selectable card with loading skeletons for app-like workflows.

Quick Start

1. Basic Usage

astro 
---
import BasicCard from '../components/cards/basic.card.astro';
import GlassCard from '../components/cards/glass.card.astro';
---

<BasicCard variant="elevated" isHoverable={true}>
  <span slot="badge">Live</span>
  <span slot="title">Telemetry Summary</span>
  <span slot="subtitle">Realtime service status</span>

  <p>Monitor your production systems with a clean baseline card.</p>

  <div slot="footer">
    <span>99.98% uptime</span>
    <span>12 regions</span>
  </div>
</BasicCard>

<GlassCard variant="violet" blur="lg" href="/control-center">
  <span slot="badge">Overlay</span>
  <span slot="title">Control Center</span>
  <span slot="subtitle">Command-ready glass panel</span>

  <p>Use frosted layers when you want depth without heavy chrome.</p>
</GlassCard>

2. Shared Slots

All card variants support the same reusable content regions:

  • media: top visual area such as charts, mock previews, gradients, posters, or thumbnails
  • title: main heading
  • subtitle: secondary supporting text
  • badge: compact status pill or metadata
  • header: custom elements injected alongside title and subtitle
  • default slot: main card body content
  • footer: stats, links, actions, or secondary meta

3. Zero-CSS Customization

astro 
---
import GlowCard from '../components/cards/glow.card.astro';
import RetroCard from '../components/cards/retro.card.astro';
---

<GlowCard
  bg="#08111f"
  textColor="#f8fafc"
  borderColor="rgba(56, 189, 248, 0.35)"
  glowColor="linear-gradient(90deg, #22d3ee, #8b5cf6)"
>
  <span slot="title">Custom Aura</span>
  <p>Override visual tokens without touching a stylesheet.</p>
</GlowCard>

<RetroCard
  bg="#fef08a"
  textColor="#111111"
  shadowColor="#111111"
  radius="sm"
>
  <span slot="title">Poster Drop</span>
  <p>Quickly adapt the same component to a bold campaign aesthetic.</p>
</RetroCard>

4. Interactive States

astro 
---
import InteractiveCard from '../components/cards/interactive.card.astro';
---

<InteractiveCard variant="selectable" isSelected={true}>
  <span slot="badge">Selected</span>
  <span slot="title">Workspace Alpha</span>
  <span slot="subtitle">Shared delivery board</span>
  <p>Perfect for account pickers, template choosers, or dashboard modules.</p>
</InteractiveCard>

<InteractiveCard isLoading={true} />

Common Developer API

These props stay consistent across the full card set:

PropTypeDefaultDescription
padding'none' | 'sm' | 'md' | 'lg' | 'xl'Variant-specificControls internal spacing density.
radiusVariant-specificVariant-specificCard corner radius.
bgstringundefinedCustom background or gradient override.
textColorstringundefinedCustom text color override.
borderColorstringundefinedCustom border color override.
hrefstringundefinedRenders the card as an anchor when provided.
targetstringundefinedAnchor target attribute.
relstringundefinedAnchor rel attribute.
classstringundefinedExtra class names for custom composition.

Variant-Specific Extras

ComponentExtra Props
basic.card.astrovariant, isHoverable
glass.card.astrovariant, blur, interactive
neon.card.astrovariant, glowing, pulsing, techCorners
gradient.card.astrovariant, gradientType, animated
retro.card.astrovariant, shadowOffset, shadowColor, isHoverable
glow.card.astrovariant, glowColor, beamSpeed
minimal.card.astrovariant, accentColor, isHoverable
interactive.card.astrovariant, isSelected, isLoading

Developer Experience Notes

When you install this recipe, your selected files land directly in src/components/cards/. There is no runtime package wrapper, no hidden styling engine, and no lock-in. You can start with one variant, mix multiple styles in the same project, or fully fork the components because the code is already yours.

For quick validation, this recipe also ships with src/pages/astro-card-test.astro, a showcase page that automatically detects which card files exist in your project and renders only those components.

You might also be interested in these

Recipe Package

astro-buttons

v0.0.1

A collection of beautifully designed, standalone UI kit button components for Astro

astrobuttonsui-kit
_ _signor_p_
0
Recipe Package

nestjs-basic-auth

v0.0.3

NESTJS BASIC AUTH RECIPE

nestjsnexauth
_ _signor_p_
1
Recipe Package

nestjs

v0.0.1

NESTJS EMPTY TEMPLATE

nestjsnexbackend
_ _signor_p_
1
Recipe Package

nestjs-logging

v0.0.1

NESTJS REQUEST LOGGING MIDDLEWARE RECIPE

nexnestjslogging
_ _signor_p_
1
Recipe Package

fastapi-exceptions

v0.0.1

Global exception handling module and demo error endpoints for FastAPI recipes.

fastapiexceptionserror-handling
_ _signor_p_
0