glasscn
Component Preview

A preview shell for component demos with switchable default and glass variants.

Overview
View your key metrics and recent project activity. Track progress across all your active projects.
You have 12 active projects and 3 pending tasks.
import {
  Card,
  CardContent,
  CardDescription,
import {
  Card,
  CardContent,
  CardDescription,

Installation

$ npx shadcn add @glasscn/component-preview

Variants

default
Overview
View your key metrics and recent project activity. Track progress across all your active projects.
You have 12 active projects and 3 pending tasks.
import {
  Card,
  CardContent,
  CardDescription,
glass
Overview
View your key metrics and recent project activity. Track progress across all your active projects.
You have 12 active projects and 3 pending tasks.
import {
  Card,
  CardContent,
  CardDescription,

API

Prop
Type
Default
Description
ComponentPreviewvariant
"default" | "glass""default"
Switches between the plain preview shell and the glass preview shell.
ComponentPreviewcomponent
React.ReactNode-
The rendered preview content shown in the top panel.
ComponentPreviewcode
string-
The raw source string used by the copy button.
ComponentPreviewlanguage
string"tsx"
Language passed to the internal Shiki highlighter for code rendering.
ComponentPreviewpreviewGlassVariant
"clear" | "frosted" | "subtle" | "liquid" | "liquid-refract""clear"
Controls the preview panel glass treatment when `variant` is `glass`.
ComponentPreviewcodeGlassVariant
"clear" | "frosted" | "subtle" | "liquid" | "liquid-refract""frosted"
Controls the code panel glass treatment when `variant` is `glass`.
ComponentPreview...props
React.ComponentProps<"div">-
Props from the underlying shadcn/ui primitive.