The Phone component is a visual container that simulates the appearance of a mobile device, making it ideal for previews, mockups, or showcasing responsive content.

• Device simulation: Displays content as if on a smartphone.
• Composable design: Supports Phone.Notch and custom content.
• Flexible layout: Works with any children content inside the container.
• Presentation-ready: Perfect for demos, prototypes, or showcases.

Usage Example

Preview

test

Code

<script lang="ts">
  import { Phone } from "@fefade-ui/svelte"
</script>

<Phone>
  {#snippet notch()}
    <Phone.Notch />
  {/snippet}
  <div style="display: flex; justify-content: center; padding: 6rem 0;">
    <h1>test</h1>
  </div>
</Phone>

Props

Prop	Type	Default	Description
children	node	—	Content rendered inside the phone frame.
class	string	—	Optional CSS classes for styling.
style	string	—	Inline styles to adjust layout or appearance.

Phone.Notch

Prop	Type	Default	Description
class	string	—	Optional CSS classes for notch styling.
style	string	—	Inline styles for custom notch appearance.

Best Practices

• Use Phone.Notch to mimic realistic device notches.
• Keep content visually centered and proportionate.
• Avoid placing interactive elements that do not scale properly.
• Combine with other UI components to showcase responsive behavior.
• Use for visual demos rather than production UI logic.