Flip Card Demo

PreviousNext

Demo showing the flip card component.

Docs
animate-uiui

Preview

Loading preview…
registry/demo/components/community/flip-card/index.tsx
'use client';

import { FlipCard } from '@/components/animate-ui/components/community/flip-card';

const data = {
  name: 'Animate UI',
  username: 'animate_ui',
  image:
    'https://pbs.twimg.com/profile_images/1950218390741618688/72447Y7e_400x400.jpg',
  bio: 'A fully animated, open-source component distribution built with React, TypeScript, Tailwind CSS, and Motion.',
  stats: { following: 200, followers: 2900, posts: 120 },
  socialLinks: {
    linkedin: 'https://linkedin.com',
    github: 'https://github.com',
    twitter: 'https://twitter.com',
  },
};

export const FlipCardDemo = () => {
  return <FlipCard data={data} />;
};

Installation

npx shadcn@latest add @animate-ui/demo-components-community-flip-card

Usage

import { DemoComponentsCommunityFlipCard } from "@/components/ui/demo-components-community-flip-card"
<DemoComponentsCommunityFlipCard />