+
+
Primary Color
+ {
+ resetTheme();
+ setCustomColor("#ec4899");
+ }}
+ className="text-xs opacity-50 hover:opacity-100 transition-opacity"
+ >
+ Reset
+
+
+
+ {/* Preset swatches */}
+
+ {COLOR_PRESETS.map((preset) => (
+ applyColor(preset.value)}
+ className="w-8 h-8 rounded-md border-2 transition-transform hover:scale-110"
+ style={{
+ backgroundColor: preset.value,
+ borderColor:
+ customColor === preset.value
+ ? theme.tokens.foreground
+ : "transparent",
+ }}
+ title={preset.name}
+ />
+ ))}
+
+
+ {/* Custom color input + copy */}
+
+ copyColor(customColor, "hex")}
+ className="h-8 px-3 rounded-md border text-xs font-medium transition-colors"
+ style={{
+ borderColor: theme.tokens.border,
+ color:
+ copied === "hex"
+ ? theme.palette.success[500]
+ : theme.tokens.foregroundMuted,
+ }}
+ >
+ {copied === "hex" ? "Copied!" : "Copy"}
+
+
+
+ {/* Theme Variations */}
+
+
+ {theme.colorMode === "dark" ? "Dark" : "Light"} Surface Themes
+
+
+ {(theme.colorMode === "dark"
+ ? DARK_SURFACE_PRESETS
+ : LIGHT_SURFACE_PRESETS
+ ).map((preset) => (
+
{
+ overrideTheme({
+ neutral: preset.neutral as unknown as typeof theme.neutral,
+ tokens: preset.tokens,
+ });
+ }}
+ className="rounded-md border p-2 text-left transition-all hover:border-[var(--color-accent)]"
+ style={{
+ borderColor: theme.tokens.border,
+ backgroundColor: theme.tokens.surface,
+ }}
+ >
+
+ {preset.preview.map((c, i) => (
+
+ ))}
+
+ {preset.name}
+
+
+ {preset.description}
+
+
+ ))}
+
+
+
+ {/* Hero + Theme Customizer */}
+
+
+ v2.0.0
+
+
+ Build better interfaces,{" "}
+ faster.
+
+
+ A production-ready React component library with built-in theming,
+ accessibility, and TypeScript support.
+
+
+ Browse Components
+
+
+
+
+ {/* Theme Customizer - visible without scrolling */}
+
+
+ Pick a primary color to preview
+
+
+
+
+
+ {/* Features */}
+
+
+ Why Awesome UI?
+
+
+ Built for teams that ship fast without cutting corners.
+
+
+ {[
+ {
+ icon: (
+
+
+ ),
+ title: "Accessible",
+ desc: "WAI-ARIA compliant. Full keyboard navigation and screen reader support out of the box.",
+ },
+ {
+ icon: (
+
+
+ ),
+ title: "Themeable",
+ desc: "CSS variable theming with light/dark modes. Override any color at runtime — zero JS cost.",
+ },
+ {
+ icon: (
+
+
+ ),
+ title: "TypeScript",
+ desc: "Every component is fully typed. Exported interfaces for all props — autocomplete just works.",
+ },
+ ].map((feature) => (
+
+
+ {feature.icon}
+
+
{feature.title}
+
+ {feature.desc}
+
+
+ ))}
+
+
+ {/* Components Grid */}
+
+
+
Components
+
+ {components.length} available
+
+
+
+ {components.map((comp) => (
+
{
+ e.currentTarget.style.borderColor = theme.palette.primary[500];
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.borderColor = theme.tokens.border;
+ }}
+ >
+
{comp.name}
+
+ {comp.description}
+
+
+ ))}
+
+