Ruixen Pro early-bird — $59 lifetime, then $7905d05h08m24sLock in $59

Command Palette

Search for a command to run...

Docs
Floating Cards Hero

Floating Cards Hero

A dotted-grid framed hero with scattered tilted decoration cards — bolt tiles, meeting widgets, a social-media folder stack and an interview review note — around a centered announcement pill, headline, description and gradient CTA.

Installation

Usage

import { FloatingCardsHero } from "@/components/ruixen/floating-cards-hero";
 
export default function Page() {
  return (
    <FloatingCardsHero
      announcement="New! Pro blocks just dropped in the registry"
      announcementHref="/pro"
      title="Ship modern UIs. Without rebuilding every component from scratch."
      description="Ruixen UI gives you 200+ shadcn-style components and full-page blocks you can paste into any React project. Themed by your tokens. Accessible by default."
      primaryAction={{ href: "/docs", label: "Browse the registry" }}
    />
  );
}

Props

PropTypeDefaultDescription
titleReactNodeRequiredMain headline content.
descriptionstring-Subtitle paragraph below the headline.
announcementstring-Text shown inside the emerald announcement pill above the headline.
announcementHrefstring"#"Optional link target for the announcement pill.
primaryActionAction-Primary CTA — rendered as a gradient pill link.
decorationsReactNode | falseDefaultsReplace the scattered decoration cards with your own node, or pass false to hide them entirely.
classNamestring-Extra classes appended to the outer <section>.

Types

type Action = { href: string; label: string };

Features

  • Dotted-grid frame — a CSS radial-gradient dot pattern paints the background; no images required.
  • Scattered tilted cards — six default decorations (two bolt tiles, two meeting widgets, a social-media folder stack, and an interview note) sit at varied rotations and clip naturally at the rounded edge.
  • Zero asset dependencies — every decoration is inline JSX + lucide-react icons, so the component is self-contained and CDN-free.
  • Theme adaptive — structural surfaces use bg-card, bg-background, text-foreground, text-muted-foreground, border-border; the dotted grid uses color-mix so it inverts cleanly between light and dark.
  • Responsive — fixed 710px mobile / 912px desktop heights keep proportions consistent; some decorations hide below md to avoid clutter.
  • Composable — pass a custom decorations node (or false) to drop in your own scenery while keeping the headline, pill, and CTA layout.