// tools / customize

Theme Builder

Editing Mode

Colors

Void#050505

Primary background

Obsidian#0B0A08

Surface / card background

Ignite#E84E2D

Brand accent color

Blush#C9958A

Secondary text / hover

Chalk#F2ECE2

Primary text color

Presets

Live Preview (dark mode)

Praxys UI

ComponentsDocsTemplates

34 Components

Build beautiful UIs

Copy-paste animated React components for your next project.

Buttons3

Cards6

Text Effects6

import { AnimatedButton } from '@/components/ui'

export default function App() {

return <AnimatedButton>Click me</AnimatedButton>

}

:root {
  /* Core 5 — dark mode (default) */
  --color-void: #050505;
  --color-obsidian: #0B0A08;
  --color-ignite: #E84E2D;
  --color-blush: #C9958A;
  --color-chalk: #F2ECE2;

  /* Derived from core palette */
  --color-border: #1f1c18;
  --color-border-light: #2e2a24;
  --color-text-faint: #8d6861;
  --color-ignite-dim: #E84E2D14;

  /* Glow / gradient tokens */
  --glow-ignite-shadow: 0 0 60px -12px #E84E2D30, 0 0 120px -24px #E84E2D15;
  --selection-bg: #E84E2D40;
  --color-code-bg: #0B0A08;

  /* Hero / CTA radial glow tokens */
  --hero-glow-primary: #E84E2D12;
  --hero-glow-primary-mid: #E84E2D06;
  --hero-glow-secondary: #C9958A08;
  --cta-glow: #E84E2D15;
}

[data-theme="light"] {
  --color-void: #FAFAF8;
  --color-obsidian: #F0EDE8;
  --color-ignite: #D4432A;
  --color-blush: #8B6B62;
  --color-chalk: #1A1714;

  --color-border: #d2d1cf;
  --color-border-light: #c3c3c2;
  --color-text-faint: #614b45;
  --color-ignite-dim: #D4432A12;

  --glow-ignite-shadow: 0 0 60px -12px #D4432A20, 0 0 120px -24px #D4432A10;
  --selection-bg: #D4432A30;
  --color-code-bg: #F0EDE8;

  --hero-glow-primary: #D4432A10;
  --hero-glow-primary-mid: #D4432A06;
  --hero-glow-secondary: #8B6B6208;
  --cta-glow: #D4432A10;
}

:root { /* Core 5 — dark mode (default) */ --color-void: #050505; --color-obsidian: #0B0A08; --color-ignite: #E84E2D; --color-blush: #C9958A; --color-chalk: #F2ECE2; /* Derived from core palette */ --color-border: #1f1c18; --color-border-light: #2e2a24; --color-text-faint: #8d6861; --color-ignite-dim: #E84E2D14; /* Glow / gradient tokens */ --glow-ignite-shadow: 0 0 60px -12px #E84E2D30, 0 0 120px -24px #E84E2D15; --selection-bg: #E84E2D40; --color-code-bg: #0B0A08; /* Hero / CTA radial glow tokens */ --hero-glow-primary: #E84E2D12; --hero-glow-primary-mid: #E84E2D06; --hero-glow-secondary: #C9958A08; --cta-glow: #E84E2D15; } [data-theme="light"] { --color-void: #FAFAF8; --color-obsidian: #F0EDE8; --color-ignite: #D4432A; --color-blush: #8B6B62; --color-chalk: #1A1714; --color-border: #d2d1cf; --color-border-light: #c3c3c2; --color-text-faint: #614b45; --color-ignite-dim: #D4432A12; --glow-ignite-shadow: 0 0 60px -12px #D4432A20, 0 0 120px -24px #D4432A10; --selection-bg: #D4432A30; --color-code-bg: #F0EDE8; --hero-glow-primary: #D4432A10; --hero-glow-primary-mid: #D4432A06; --hero-glow-secondary: #8B6B6208; --cta-glow: #D4432A10; }