HUA Docs - The Syntax of Emotion

v1.2.0

bash

npm install @hua-labs/hua

tsx

import { Panel } from "@hua-labs/hua";

Pro

Solid

Glass

Elevated

Outline

Neon

Cyberpunk

Holographic

Luxury

defaultsolidglassoutlineelevatedneonholographiccyberpunkminimalluxury

Inherited Props

Panel extends Card and supports Card's base props (shadow, hoverable, children, etc.) except variant, style, and padding which are overridden.


`style`	`"default" \| "solid" \| "glass" \| "outline" \| "elevated" \| "neon" \| "holographic" \| "cyberpunk" \| "minimal" \| "luxury"`	`"default"`	Panel visual style
`effect`	`"none" \| "glow" \| "shadow" \| "gradient" \| "animated"`	`"none"`	Visual effect
`padding`	`"none" \| "small" \| "sm" \| "medium" \| "md" \| "large" \| "lg" \| "xl" \| "custom"`	`"md"`	Padding size. Use 'custom' with customPadding prop for CSS values
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "custom"`	`"lg"`	Border radius. Use 'custom' with customRounded prop for CSS values
`interactive`	`boolean`	`false`	Enable interactive hover effects
`transparency`	`number`	`1`	Panel opacity (0-1)
`blurIntensity`	`number`	`0`	Blur intensity in px
`glowIntensity`	`number`	`0`	Glow intensity in px
`borderOpacity`	`number`	-	Border opacity (0-1)
`shadowOpacity`	`number`	-	Shadow opacity (0-1)
`glowColor`	`string`	-	Custom glow color
`particleEffect`	`boolean`	`false`	Enable particle effect
`hoverEffect`	`boolean`	`false`	Enable hover effect
`animationEffect`	`boolean`	`false`	Enable animation effect
`customPadding`	`string`	-	Custom padding value (CSS)
`customRounded`	`string`	-	Custom border-radius value (CSS)
`background`	`"gradient" \| "solid" \| "pattern" \| "image" \| "video"`	-	Background type
`gradientColors`	`string[]`	-	Gradient colors array
`patternType`	`"dots" \| "lines" \| "grid" \| "waves" \| "custom"`	-	Pattern type for pattern background
`backgroundImage`	`string`	-	Background image URL
`backgroundVideo`	`string`	-	Background video URL
`hoverScale`	`number`	-	Scale factor on hover (e.g., 1.05)
`hoverRotate`	`number`	-	Rotation degrees on hover
`hoverGlow`	`boolean`	`false`	Enable glow effect on hover

docs:components.panel.examples.basictsx

1import { Panel } from '@hua-labs/hua';
2 
3<Panel style="solid">Solid Panel</Panel>
4<Panel style="glass">Glass Panel</Panel>
5<Panel style="elevated">Elevated Panel</Panel>

docs:components.panel.examples.neonCyberpunktsx

1<Panel style="neon" effect="glow">
2  Neon Style
3</Panel>
4 
5<Panel style="cyberpunk">
6  Cyberpunk Style
7</Panel>

docs:components.panel.examples.interactivetsx

1<Panel
2  style="elevated"
3  interactive
4  hoverScale={1.05}
5  hoverGlow
6>
7  Hover me!
8</Panel>

•docs:components.panel.accessibility.basedOnCard: docs:components.panel.accessibility.basedOnCardDesc

Divider Form