Note: This project is still in development and has not been publicly released. Coming soon.
Docs
Embed
Embed

A responsive iframe wrapper component with loading states, error handling, and site branding for seamless content embedding.

46 views
2 downloads
Loading...
Not all sites are embeddable

Some websites cannot be embedded in an iframe due to their security settings. This is usually because of the X-Frame-Options or Content-Security-Policy HTTP headers, which prevent the site from being displayed inside an iframe on other domains. If you see a blank area or an error, the site you are trying to embed likely has these protections enabled.

Overview

The Embed component simplifies iframe integration by providing intelligent loading states, error handling, and professional site branding, making it perfect for showcasing external content, demos, and third-party tools. It enhances user trust with clear domain identification and fallback options when content fails to load. Essential for maintaining a polished user experience when embedding external websites or applications.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/embed.json

Usage

1import { Embed } from "@/registry/components/embed"
2
3export function Component() {
4 return (
5 <Embed
6 src="https://example.com"
7 title="Example Website"
8 height={600}
9 allowFullScreen={true}
10 />
11 )
12}

API Reference

Props

PropTypeDefaultDescription
srcstring-URL of the content to embed (required)
titlestring"Embedded content"Accessible title for the iframe
heightnumber | string500Height of the embedded content
widthnumber | string"100%"Width of the embedded content
allowFullScreenbooleantrueAllow fullscreen mode
sandboxstring"allow-scripts allow-same-origin allow-forms allow-popups"Sandbox restrictions
loading"eager" | "lazy""lazy"Loading behavior
allowstring"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"Feature permissions
classNamestring""Additional CSS classes

Examples

Blocked Content

Here is an example of a website which blocks the use of embedded content.

Loading...