Show Code Preview to Users
A customizable code preview component for displaying code snippets with syntax highlighting.
Pumki UIWorking Preview
Pumki UIAnsh Singh Sonkhia India
Installation
Usage
import { Preview, ResponsivePreview } from '@/components/pumki-ui/preview';<Preview
title=“Working Preview” code=
>code that renders should be here, while the one that is shown to users should be in the above block.
</Preview>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content to render inside the preview area. |
code | string | - | Code string to display in the code tab. |
title? | string | - | Title for the preview block. |
description? | string | - | Description for the preview block. |
className? | string | - | Additional CSS classes for the container. |
showCode? | boolean | true | Show the code tab. |
centered? | boolean | true | Center the preview content. |
minHeight? | string | ”200px” | Minimum height for the preview area. |
previewHeight? | string | ”-“ | Height for the preview area. |
Last updated on