Embed

Overview

ReUI publishes a still image of every block and every example, in light and dark, at a stable URL. Directories, newsletters and "best of shadcn" lists can hotlink those images straight away. Live, interactive previews are an iframe contract for named partners, because the preview routes only allow framing from an allowlisted origin.

Thumbnails

Every Pro block has a 1080 by 720 still in both color schemes:

https://reui.io/thumbnails/blocks/<block-name>-light.webp
https://reui.io/thumbnails/blocks/<block-name>-dark.webp

Every free example has the same pair, keyed by its c-* name:

https://reui.io/thumbnails/components/<example-name>-light.webp
https://reui.io/thumbnails/components/<example-name>-dark.webp

The block name is the last segment of the block's page URL (for /blocks/application/app-shell/app-shell-1 it is app-shell-1); the example name is the last segment of the example's page URL (for /components/accordion/c-accordion-1 it is c-accordion-1). The catalog at /llms-full.txt lists every block and example with its URL, so a directory can be built from one file.

What you can rely on:

• Hotlinking is permitted. The images are served from the edge with a long cache and refresh in place when a block is re-captured, under the same filename, so a link never breaks.
• Attribution is required. Put a visible link to the block or example page next to the image, for example "App Shell 1 by ReUI" pointing at /blocks/application/app-shell/app-shell-1. The thumbnail is a preview of the block, not a substitute for it.
• Do not mirror the set. Link to the images; do not copy the 629 block stills or the example stills into your own storage. A mirrored copy goes stale at the next capture run.

Live previews for named partners

The preview routes render one block as a full page, with no site chrome, and read the design system from the URL:

https://reui.io/preview/<base>/<block-name>?embed=1&style=nova&theme=light

• <base> is base (Base UI) or radix (Radix UI).
• embed=1 hides the toolbar and the customizer hooks the block pages use.
• The design parameters are the same the site's customizer writes: style, theme, font, fontHeading, chartColor, baseColor, menuAccent, menuColor, radius and iconLibrary. Omit any of them for the defaults. The preview reads them on its first render, so there is no flash of the wrong style.
• Responses are cached per deployment, so a preview URL is stable until the next release and cheap to hit.

The preview routes send a Content-Security-Policy with frame-ancestors limited to reui.io and the partner origins we have added, so an iframe from another origin renders blank. That is deliberate: a live preview runs our code on your page, and we add origins one at a time. To be added, write to hello@reui.io with the origin (scheme and host) and where the previews will appear. Once your origin is allowlisted:

<iframe
  src="https://reui.io/preview/base/app-shell-1?embed=1&style=nova&theme=light"
  title="App Shell 1, a ReUI block"
  width="100%"
  height="720"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

Start at a height of 720 pixels and adjust per block; the preview does not resize itself to its content. Keep the attribution link next to the frame, the same as for thumbnails.

What not to do

• Do not scrape the block pages or the preview routes to rebuild the catalog; the images and /llms-full.txt exist so you do not have to.
• Do not present a block as your own work. The blocks are licensed to ReUI Pro customers for their projects, not for redistribution.