Foundations
IntroductionCard
A highly customizable content panel supporting headers, custom actions, content, and footers.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/card.jsonBasic Card
A basic card panel with title, description, content, and footer.
Climate
Configure your climate device.
16°C
HomeKit Connected
Sizes
Cards are available in default and small (sm) padding dimensions.
Standard Card
Default padding and spacing.
This card uses the standard default sizing specs.
Small Card
Tighter padding and spacing.
This card uses compact sm sizing specs.
Interactive Effects
Enabling magnetic physics, press scaling, clicks ripples, and boundary specular reflections.
Refractive Card
Refracts backgrounds and shines with interactive light reflections.
Try hovering, dragging, or pressing this card to experience the elastic springs and specular glare.
Best practices
The best practices when using cards.
- Use cards to group related pieces of information, keeping dashboard interfaces structured and readable.
- Avoid nesting too many complex interactive elements like
Button or Slider inside a card when magnetic physics or scale are enabled. - Keep card descriptions short and to the point, leaving content-heavy details inside the card body.
- Use a Dialog instead of a card for content that requires user confirmation before proceeding.
Props
The props available for the Card component.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "default" | Defines internal padding/spacing. "sm" is more compact. |
| magnetic | boolean | false | Enables physics-based elastic magnetic pulling effect towards the cursor. |
| scale | boolean | false | Enables tactile spring scaling response when pressed. |
| ripple | boolean | false | Enables high-fidelity ambient light ripples on surface clicks. |
| specular | boolean | true | Enables dynamic 3D specular highlight reflections that track cursor movement. |
| specularAngle | number | undefined | Optional fixed angle for the specular light reflection. |
| liquidGlass | boolean | false | Enables physical liquid glass refraction distortion (Chromium only). |
| refractiveIndex | number | 1.5 | Index of refraction (IOR) for the glass surface curvature. Range 1.0 (air) to 2.4. |
| bezelWidth | number | 30 | Depth of the glass bezel refraction boundary zone (px). |
| displacementScale | number | 40 | Strength of the physical refraction displacement offset. |
| surfaceProfile | "circle" | "squircle" | "concave" | "lip" | "squircle" | 3D bezel outline profile contour style. |
| chromaticAberration | boolean | false | Enables realistic RGB channel prism splitting refraction at bezel edges. |
| saturationBoost | number | 1.3 | Color saturation boost multiplier inside refracted zone. |
| backgroundBlur | number | 0.3 | Pre-blur factor applied to background to hide SVG rendering artifacts. |