Glass Split Card

A glassmorphism split card component

Installation

pnpm dlx shadcn@latest add @ruixenui-pro/glass-split-card

Prop	Type

On This Page

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

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

Prop	Type	Default	Description
`children`	`React.ReactNode`	`undefined`	Content to display
`title`	`string`	`undefined`	Section title
`description`	`string`	`undefined`	Section description

Glassmorphism effect - Frosted glass panel with backdrop blur
Split layout - Two-panel design for content and forms
Mobile responsive - Stacks to single column on mobile
Reduced motion support - Disables blur for prefers-reduced-motion
Customizable panels - Pass any content to left or right slots
Reversible layout - Swap glass panel position with reversed prop
Pre-built form components - GlassForm and GlassFormField for common patterns
Accessible forms - Proper label associations and form semantics
Theming support - Customize colors via class props

Get Ruixen UI Pro to view this section.

`leftContent`	`React.ReactNode`	`undefined`	Content for the left (glass) panel
`rightContent`	`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