UI & Theme System

Prax uses Tailwind CSS for styling and supports both light and dark modes.

---

Theme Switching

Theme state is managed using React Context or Zustand.

tsxCopyEditconst { theme, toggleTheme } = useTheme()

---

Styling Components

Tailwind is used to apply styles directly in JSX:

tsxCopyEdit<button className="bg-primary text-white rounded-md px-4 py-2">
  Run Flow
</button>

You can define custom colors or spacing in tailwind.config.js.

---

Shared UI Components

Located in:

bashCopyEdit/frontend/components/

Reusable elements include:

• Buttons

• Modals

• Form controls

• Pills/badges

• NodeConfig panels

Each is TypeScript-typed and kept independent for testability.

---

Icon System

SVG icons are stored in:

bashCopyEdit/frontend/icons/

You can import and inline icons as components.