Theme

FlipCard

display @dryui/ui Compound

Flippable card with front and back faces

cardfliphoverclick3danimation

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { FlipCard } from '@dryui/ui';
</script>

<FlipCard.Root trigger="hover">
  <FlipCard.Front>Front content</FlipCard.Front>
  <FlipCard.Back>Back content</FlipCard.Back>
</FlipCard.Root>

Import options

Root package

ts
import { FlipCard } from '@dryui/ui'

Per-component subpath

ts
import { FlipCard } from '@dryui/ui/flip-card'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Flip on hover

Svelte 5

Hover to learn more

svelte
<FlipCard.Root trigger="hover">
  <FlipCard.Front>
    <div style="padding: 2rem; text-align: center;">
      <strong>Svelte 5</strong>
      <p>Hover to learn more</p>
    </div>
  </FlipCard.Front>
  <FlipCard.Back>
    <div style="padding: 2rem; text-align: center;">
      <strong>Runes & Snippets</strong>
      <p>Fine-grained reactivity with zero boilerplate</p>
    </div>
  </FlipCard.Back>
</FlipCard.Root>

Flip on click

Click to reveal

What is the capital of France?

svelte
<FlipCard.Root trigger="click">
  <FlipCard.Front>
    <div style="padding: 2rem; text-align: center;">
      <strong>Click to reveal</strong>
      <p>What is the capital of France?</p>
    </div>
  </FlipCard.Front>
  <FlipCard.Back>
    <div style="padding: 2rem; text-align: center;">
      <strong>Paris</strong>
      <p>Click again to go back</p>
    </div>
  </FlipCard.Back>
</FlipCard.Root>

Vertical flip direction

Vertical flip

Hover to flip vertically

svelte
<FlipCard.Root trigger="hover" direction="vertical">
  <FlipCard.Front>
    <div style="padding: 2rem; text-align: center;">
      <strong>Vertical flip</strong>
      <p>Hover to flip vertically</p>
    </div>
  </FlipCard.Front>
  <FlipCard.Back>
    <div style="padding: 2rem; text-align: center;">
      <strong>Back side</strong>
      <p>Flips along the horizontal axis</p>
    </div>
  </FlipCard.Back>
</FlipCard.Root>

Structure

Compound components always start with FlipCard.Root. Use this structure block to understand required wrappers before you wire state or styling.

FlipCard.Root
  FlipCard.Front
  FlipCard.Back
FlipCard.Root FlipCard.FrontFlipCard.Back

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with FlipCard.Root, then add only the parts you need.

FlipCard.FrontFlipCard.Back

FlipCard.Root

Prop Type Default Required Bindable
trigger
hoverclick
 — — —
direction
horizontalvertical
 — — —
flipped
boolean
— — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

FlipCard.Front

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

FlipCard.Back

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.