# Premium Dark UI - Core Components
The 4 building blocks for premium dark UI.
---
## A. Section Wrapper
```tsx
// PremiumSection.tsx
export function PremiumSection({ children, withGlow = true }) {
return (
{withGlow && (
)}
{children}
)
}
```
---
## B. Glass Card
```tsx
// PremiumCard.tsx
export function PremiumCard({ children, className = "" }) {
return (
{children}
)
}
```
---
## C. Heading
```tsx
// PremiumHeading.tsx
export function PremiumHeading({ children, accent, as: Tag = 'h2' }) {
return (
{children}
{accent && {accent}}
)
}
```
---
## D. Radial Glow
```tsx
// RadialGlow.tsx
export function RadialGlow({ className = "" }) {
return (
)
}
```
---
## Glassmorphism Rules
✅ **DO**:
- Use `bg-white/[0.02]` for card backgrounds
- Add `backdrop-blur-xl` for blur effect
- Use `border-white/10` for subtle borders
- Keep opacity LOW (0.02 to 0.04)
- Layer multiple glass surfaces
❌ **DON'T**:
- Use high opacity (breaks glass effect)
- Skip backdrop blur (looks flat)
- Use on light backgrounds (invisible)
- Overuse (reserve for cards/panels)
---
## Radial Glow Usage
### When to Use:
- ✅ Hero sections (large, centered)
- ✅ Important CTAs (behind forms)
- ✅ Section breaks (corner glows)
- ❌ Every section (overwhelming)
- ❌ Small components (too subtle)
### Sizes:
- **Small**: 400px (subtle accent)
- **Medium**: 600px (default)
- **Large**: 800px (hero sections)
### Positioning:
```tsx
// Centered
// Top-left
// Bottom-right
```
---
## Related Files
- [Colors & Typography](./premium-dark-ui-colors.md)
- [Layouts](./premium-dark-ui-layouts.md)
- [Advanced](./premium-dark-ui-advanced.md)