Media & Previews
Examples of image galleries, video embeds, and component previews.
1 min read
Image Gallery
Display multiple images in a responsive grid with a lightbox.
Tip
Use the
columns prop to control the number of columns in the gallery (2, 3, or 4).
Placeholder images are used here. Replace with your actual image paths.
Video Embed
Easily embed videos from YouTube, Vimeo, or custom sources.
YouTube Example
Vimeo Example (Placeholder)
Ensure your video URLs are correct and publicly accessible.
Component Preview
Showcase your UI components with a live preview and corresponding code.
Interactive Button
This is a preview of a standard button component.
alert("Button clicked!")}>Click Me</Button>;
}`}
>
Custom Alert Example
Demonstrating a custom alert component within the preview.
</Alert>); }
export default MyCustomAlert;`}
Heads up!
This is a live preview of a custom alert component.
Advanced Component Preview: Feedback Form
Here's a more complex example using a mini feedback form.
Interactive Feedback Form
A small form to collect user feedback, demonstrating state and input handling.
{/ ... form fields /}
</form>
)
}`}
>