Registry Preview

A resizable preview component with a dotted grid background for showcasing components in a responsive container.

Preview

Installation

Open in
Install the registry-preview
npx shadcn@latest add https://jt-components.vercel.app/r/registry-preview.json
pnpm dlx shadcn@latest add https://jt-components.vercel.app/r/registry-preview.json
yarn dlx shadcn@latest add https://jt-components.vercel.app/r/registry-preview.json
bunx --bun shadcn@latest add https://jt-components.vercel.app/r/registry-preview.json

Usage

import RegistryPreview from "@/components/registry-preview"
<RegistryPreview>
  <YourComponent />
</RegistryPreview>

Props

PropTypeDefault
showGrid?
boolean
true
className?
string
-
maxWidth?
string
"4xl"
minHeight?
string
"350px"
maxSize?
number
98
minSize?
number
5
defaultSize?
number
98
children
ReactNode
-

Source Code

Loading component...

Examples

Without Grid Background

No Grid Background

This preview has the grid background disabled.

Custom Dimensions

Smaller Container

70% default size, 200px min height, 2xl max width

Last updated on

Open in v0

A button to open a component in v0

Registry Explorer

A powerful file explorer component that allows you to browse and view component files from your registry with syntax highlighting and interactive navigation