beUI Pro para móvil ya está disponible: 50 bloques y pantallas de React Native
Flip Card
2 variantes
Two composable card interactions: a direct two-sided flip and a compact card that flips continuously as it morphs into a centered modal.
Image flip cards
flip-card.tsxThree image-led cards with independent front and back artwork, click or keyboard flipping, and an optional project link on the back.
ResidenceCoastal house
WorkspaceThe long room
LandscapeGarden edge
TSXcomponents/previews/premium/flip-card-preview.tsx
"use client";
import { ArrowUpRight, RotateCcw } from "lucide-react";
import type { ReactNode } from "react";
import { FlipCard } from "@/components/premium/flip-card";
const CARDS = [
{
id: "coastal-house",
frontImage:
"https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&fm=webp&q=84&w=900",
frontAlt: "Sunlit living room overlooking the coast",
backImage:
"https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&fm=webp&q=84&w=900",
backAlt: "Sculptural stone interior detail",
eyebrow: "Residence",
title: "Coastal house",
description: "A quiet home shaped around morning light and an open horizon",
},
{
id: "working-studio",
frontImage:
"https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&fm=webp&q=84&w=900",
frontAlt: "Quiet creative studio with long worktables",
backImage:
"https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&fm=webp&q=84&w=900",
backAlt: "Minimal gallery room washed in natural light",
eyebrow: "Workspace",
title: "The long room",
description: "A shared studio designed for deep work and generous pauses",
},
{
id: "garden-edge",
frontImage:
"https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&fm=webp&q=84&w=900",
frontAlt: "Modern home opening onto a green terrace",
backImage:
"https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&fm=webp&q=84&w=900",
backAlt: "Warm modern courtyard framed by timber",
eyebrow: "Landscape",
title: "Garden edge",
description:
"Living spaces that open gradually into the surrounding garden",
},
] as const;
export function FlipCardPreview() {
return (
<div className="grid w-full max-w-5xl gap-5 px-4 py-12 sm:grid-cols-2 sm:px-8 lg:grid-cols-3">
{CARDS.map((card) => (
<FlipCard
key={card.id}
faceClassName="rounded-[1.75rem]"
front={
<CardImage src={card.frontImage} alt={card.frontAlt}>
<span className="absolute top-4 right-4 grid size-10 place-items-center rounded-full border border-border/60 bg-background/55 text-foreground backdrop-blur-xl backdrop-saturate-150">
<RotateCcw aria-hidden className="size-4" />
</span>
<span className="absolute right-4 bottom-4 left-4 rounded-2xl border border-border/60 bg-background/55 p-4 text-foreground backdrop-blur-xl backdrop-saturate-150">
<span className="block font-medium text-muted-foreground text-sm">
{card.eyebrow}
</span>
<span className="mt-2 block font-medium text-xl">
{card.title}
</span>
</span>
</CardImage>
}
back={
<CardImage src={card.backImage} alt={card.backAlt}>
<span className="absolute top-4 right-4 grid size-10 place-items-center rounded-full border border-border/60 bg-background/55 text-foreground backdrop-blur-xl backdrop-saturate-150">
<RotateCcw aria-hidden className="size-4" />
</span>
<span className="absolute right-4 bottom-4 left-4 rounded-2xl border border-border/60 bg-background/60 p-5 text-foreground backdrop-blur-xl backdrop-saturate-150">
<span className="block font-medium text-xl">{card.title}</span>
<span className="mt-2 block text-muted-foreground text-sm leading-6">
{card.description}
</span>
<a
href={`#${card.id}`}
className="mt-5 inline-flex h-10 items-center gap-2 rounded-full border border-border bg-background px-4 font-medium text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
>
View project
<ArrowUpRight aria-hidden className="size-4" />
</a>
</span>
</CardImage>
}
/>
))}
</div>
);
}
function CardImage({
src,
alt,
children,
}: {
src: string;
alt: string;
children: ReactNode;
}) {
return (
<div className="relative h-full w-full">
{/* biome-ignore lint/performance/noImgElement: preview demonstrates consumer-hosted images without requiring Next image host configuration. */}
<img
src={src}
alt={alt}
width={900}
height={1200}
loading="lazy"
className="h-full w-full object-cover"
/>
{children}
</div>
);
}
El código fuente está bloqueado
Consigue acceso para instalar componentes premium y ver todo el código fuente.
Abrir panelInstalar
$ bunx --bun shadcn add @beui-pro/flip-card
Modal flip card
flip-card-modal.tsxA compact card whose translation, scale, and 3D flip share one continuous motion into a focus-trapped modal, then reverse together on close.
TSXcomponents/previews/premium/flip-card-modal-preview.tsx
"use client";
import { ArrowUpRight } from "lucide-react";
import type { ReactNode } from "react";
import { FlipCardModal } from "@/components/premium/flip-card";
const FRONT_IMAGE =
"https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&fm=webp&q=84&w=1100";
const BACK_IMAGE =
"https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&fm=webp&q=84&w=1100";
export function FlipCardModalPreview() {
return (
<div className="w-full max-w-[18rem] px-3 py-12">
<FlipCardModal
id="gallery-room"
front={
<CardImage
src={FRONT_IMAGE}
alt="Minimal gallery room washed in natural light"
>
<span className="absolute inset-x-3 bottom-3 rounded-2xl border border-border/60 bg-background/55 p-4 text-foreground backdrop-blur-xl backdrop-saturate-150 sm:inset-x-4 sm:bottom-4 sm:p-5">
<span className="block font-medium text-muted-foreground text-xs sm:text-sm">
Private collection
</span>
<span className="mt-2 block font-medium text-xl sm:text-2xl">
The light room
</span>
<span className="mt-2 block text-muted-foreground text-xs sm:text-sm">
Click to open the story
</span>
</span>
</CardImage>
}
back={
<CardImage src={BACK_IMAGE} alt="Sculptural stone interior detail">
<span className="absolute inset-x-3 bottom-3 rounded-2xl border border-border/60 bg-background/60 p-4 text-foreground backdrop-blur-xl backdrop-saturate-150 sm:inset-x-4 sm:bottom-4 sm:p-5">
<span className="block font-medium text-xl sm:text-2xl">
Designed around stillness
</span>
<span className="mt-2 block text-muted-foreground text-xs leading-5 sm:mt-3 sm:text-sm sm:leading-6">
Natural materials and measured openings shape a calm place for
art, conversation, and changing light
</span>
<a
href="#light-room"
className="mt-4 inline-flex h-10 items-center gap-2 rounded-full border border-border bg-background px-4 font-medium text-xs outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring sm:mt-5 sm:text-sm"
>
View the project
<ArrowUpRight aria-hidden className="size-4" />
</a>
</span>
</CardImage>
}
/>
</div>
);
}
function CardImage({
src,
alt,
children,
}: {
src: string;
alt: string;
children: ReactNode;
}) {
return (
<div className="relative h-full w-full">
{/* biome-ignore lint/performance/noImgElement: preview demonstrates consumer-hosted images without requiring Next image host configuration. */}
<img
src={src}
alt={alt}
width={1100}
height={1375}
loading="lazy"
className="h-full w-full object-cover"
/>
{children}
</div>
);
}
El código fuente está bloqueado
Consigue acceso para instalar componentes premium y ver todo el código fuente.
Abrir panelInstalar
$ bunx --bun shadcn add @beui-pro/flip-card-modal