Getting Started
Templates
Components
React.ReactNode |
undefined |
| Content for the right (transparent) panel |
backgroundImage | string | undefined | Background image URL |
overlayOpacity | number | 40 | Dark overlay opacity (0-100) |
reversed | boolean | false | Swap glass panel to right side |
className | string | undefined | Additional CSS classes for container |
leftClassName | string | undefined | Additional CSS classes for left panel |
rightClassName | string | undefined | Additional CSS classes for right panel |
glassBackground | string | "bg-black/60" | Glass panel background class |
borderColor | string | "border-white/20" | Border color class |
GlassForm| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | required | Form fields |
onSubmit | (e: FormEvent) => void | undefined | Form submission handler |
logo | React.ReactNode | undefined | Logo/brand element |
title | string | undefined | Form title |
description | string | undefined | Form description |
submitText | string | "Continue" | Submit button text |
footer | React.ReactNode | undefined | Content below submit button |
accentColor | string | "bg-orange-500..." | Button color classes |
GlassFormField| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | Field label |
name | string | required | Input name for form submission |
type | "text" | "email" | ... | "text" | Input type |
placeholder | string | undefined | Placeholder text |
required | boolean | false | Whether field is required |
value | string | undefined | Controlled input value |
onChange | (e: ChangeEvent) => void | undefined | Change handler |
accentColor | string | "focus-visible:ring-orange-500" | Focus ring color class |
GlassContent| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | undefined | Content to display |
title | string | undefined | Section title |
description | string | undefined | Section description |
prefers-reduced-motionreversed propGlassForm and GlassFormField for common patternsimport { GlassSplitCard } from "@/components/ui/glass-split-card"
export default function Example() {
return (
<GlassSplitCard
leftContent={<div>Left panel content</div>}
rightContent={<div>Right panel content</div>}
/>
)
}<GlassSplitCard
backgroundImage="/hero-bg.jpg"
overlayOpacity={50}
leftContent={<div>Form content</div>}
rightContent={<div>Feature list</div>}
/>import {
GlassSplitCard,
GlassForm,
GlassFormField,
GlassContent,
} from "@/components/ui/glass-split-card"
export default function SignUpPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
const formData = new FormData(e.currentTarget)
console.log(Object.fromEntries(formData))
}
return (
<GlassSplitCard
leftContent={
<GlassForm
logo={<span className="text-orange-500 font-bold">BRAND</span>}
title="Create account"
description="Get started with your free account."
onSubmit={handleSubmit}
>
<GlassFormField
label="Email"
type="email"
name="email"
placeholder="[email protected]"
required
/>
<GlassFormField
label="Password"
type="password"
name="password"
placeholder="••••••••"
required
/>
</GlassForm>
}
rightContent={
<GlassContent
title="Welcome"
description="Join thousands of users building the future."
/>
}
/>
)
}<GlassSplitCard
reversed
leftContent={<div>This appears on the right</div>}
rightContent={<div>This appears on the left</div>}
/><GlassSplitCard
glassBackground="bg-blue-900/60"
borderColor="border-blue-400/30"
leftContent={
<GlassForm
accentColor="bg-blue-500 hover:bg-blue-400"
title="Blue Theme"
>
<GlassFormField
label="Email"
name="email"
accentColor="focus-visible:ring-blue-500"
/>
</GlassForm>
}
/><GlassSplitCard
leftContent={
<div className="text-white">
<h2 className="text-3xl font-bold mb-4">Custom Content</h2>
<p className="text-zinc-400">
You can put any content in the panels, not just forms.
</p>
</div>
}
rightContent={
<img
src="/feature-image.png"
alt="Feature"
className="rounded-lg"
/>
}
/>