header.title

header.subtitle

implementation.title

implementation.adminGuide.title

implementation.adminGuide.intro

  1. implementation.adminGuide.step1
  2. implementation.adminGuide.step2
  3. implementation.adminGuide.step3
  4. implementation.adminGuide.step4

implementation.codeExample

// Set theme programmatically
const setTheme = (theme) => {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
};

// Load saved theme on app start
const savedTheme = localStorage.getItem('theme') || 'aurora';
setTheme(savedTheme);

implementation.note

controls.themeLabel

controls.categoryLabel:themeCategories.professional
controls.themeNameLabel:themes.aurora.label

themes.aurora.description

controls.effectLabel

controls.categoryLabel:effectCategories.cosmic
controls.effectNameLabel:effects.waves.label

effects.waves.description

effects.waves.usage

controls.liveNote

sections.effectPlacements.title

sections.effectPlacements.description

sections.effectPlacements.heroBadge

sections.effectPlacements.heroTitle

sections.effectPlacements.heroSubtitle

Aurora Waves

sections.effectPlacements.selectedEffect

sections.effectPlacements.selectedEffectDesc

Particles

sections.effectPlacements.ambientParticles

sections.effectPlacements.ambientParticlesDesc

Geometry

sections.effectPlacements.geometricMesh

sections.effectPlacements.geometricMeshDesc

sections.effectPlacements.implementationCode
import { VisualEffect } from '@/components/VisualEffect';

// Hero banner with effect
<section className="relative overflow-hidden min-h-[60vh]">
  <VisualEffect 
    placement="hero" 
    effect="aurora" 
    intensity="normal" 
  />
  <div className="relative z-10">
    <h1>Hero Content</h1>
  </div>
</section>

// Card with subtle effect
<Card className="relative overflow-hidden">
  <VisualEffect 
    placement="card" 
    effect="neuro" 
    intensity="subtle" 
  />
  <CardContent className="relative z-10">
    Content here
  </CardContent>
</Card>

sections.buttons.title

sections.buttons.description

sections.buttons.successBadge
sections.buttons.warningBadge
sections.buttons.infoBadge

sections.cards.title

sections.cards.description

sections.cards.guidance

sections.cards.guidanceText

sections.cards.motion

sections.cards.motionText

sections.cards.spacing

sections.cards.spacingText

sections.forms.title

sections.forms.description

localization.title en-US

localization.description

localization.currency

$1,234.56

localization.number

1,234,567.89

localization.date

December 6, 2025

localization.relative

2 days agonext week

sections.tables.title

sections.tables.description

sections.tables.sampleTable

sections.tables.tokensections.tables.purpose
--control-heightButtons & inputs share this value for layout consistency.
--motion-duration-basePrimary transition timing for hover and focus states.
--icon-strokeStandard stroke width for glyphs and iconography.

Alerts

Success — Token changes saved.
Warning — Contrast is borderline.
Destructive — Token missing.
Info — Hover states ease per theme.

Live token swatches

--background
—
--foreground
—
--primary
—
--accent
—
--secondary
—
--success
—
--warning
—
--info
—
--card-radius
—
--button-radius
—
--control-height
—
--stack-gap
—
--section-gap
—
--motion-duration-base
—
--motion-ease
—
--icon-stroke
—

sections.navigation.title

sections.navigation.description

sections.navigation.navbar

sections.navigation.breadcrumbs

sections.navigation.tabs

sections.navigation.tabContent

sections.feedback.title

sections.feedback.description

sections.feedback.loadingStates

sections.feedback.spinner
sections.feedback.skeleton

sections.feedback.progressTooltip

sections.feedback.progressBar
65% sections.feedback.complete
sections.feedback.tooltip
sections.feedback.tooltipText

sections.lists.title

sections.lists.description

sections.lists.unorderedList

  • sections.lists.item1
  • sections.lists.item2
  • sections.lists.item3

sections.lists.orderedList

  1. sections.lists.step1
  2. sections.lists.step2
  3. sections.lists.step3

sections.lists.definitionList

sections.lists.term
sections.lists.definition
sections.lists.another
sections.lists.moreDetails

sections.lists.chipList

React TypeScript Tailwind

sections.dataDisplay.title

sections.dataDisplay.description

12,458

sections.dataDisplay.totalUsers

↑ 12% sections.dataDisplay.fromLastMonth

$45,231

sections.dataDisplay.revenue

↑ 8% sections.dataDisplay.fromLastMonth

98.5%

sections.dataDisplay.uptime

↓ 0.5% sections.dataDisplay.fromLastMonth

sections.dataDisplay.noItems

sections.dataDisplay.getStarted

sections.extendedForms.title

sections.extendedForms.description

sections.extendedForms.selectionControls

sections.extendedForms.checkboxes
sections.extendedForms.radioButtons

sections.extendedForms.inputsControls

sections.extendedForms.toggleSwitch

sections.extendedForms.enableNotifications

sections.extendedForms.rangeSlider

sections.extendedForms.searchInput

sections.extendedForms.fileUpload

sections.extendedForms.dropFiles

sections.extendedForms.supports

sections.richComponents.title

sections.richComponents.description

sections.richComponents.accordion

sections.richComponents.section1Content

sections.richComponents.section2Content

sections.richComponents.avatarsIcons

Avatars
JS
MJ
AB
sections.richComponents.iconButtons

sections.richComponents.stepper

✓
sections.richComponents.complete
2
sections.richComponents.inProgress
3
sections.richComponents.pending
4
sections.richComponents.review

sections.richComponents.timeline

sections.richComponents.projectStarted

sections.richComponents.projectStartedDesc

sections.richComponents.twoDaysAgo
sections.richComponents.milestoneReached

sections.richComponents.milestoneReachedDesc

sections.richComponents.oneDayAgo

sections.formValidation.title

sections.formValidation.description

✓ sections.formValidation.emailValid
⚠ sections.formValidation.emailInvalid

sections.typography.title

sections.typography.description

sections.typography.quote— Steve Jobs

sections.typography.linkStyles

sections.typography.linkIntro sections.typography.primaryLink sections.typography.linkMiddle sections.typography.underlinedLink sections.typography.linkEnd