Skip to components
rayastudio
Menu

Studio layout — variant D: Tune mode

A Browse / Tune switch in the header. Tune replaces the docs world with a wide workbench: tuner left, previews right.

  • Roomiest tuning surface, and Browse mode stays a pristine docs page.
  • A context switch, not a panel: you leave the docs metaphor to tune.
  • Two layouts to build and maintain (and two states to keep consistent).

button

Triggers an action with COSS-style variants, sizes, icons, and loading state.

Preview

The loading state keeps an icon-library placeholder in the source package and resolves to a real spinner when installed.

Preview is scoped to System Baseline — the shell chrome around it wears coss's theme.

Usage

# shadcn-style install from raya's registry
npx shadcn@latest add @raya/button

# or by URL
npx shadcn@latest add https://raya.alfrizk.dev/r/button.json

Tokens in use

--background
--foreground
--card
--primary
--secondary
--muted
--accent
--border

API

variant
variant · size
size
System defaults with component-level overrides where declared.
props
Base UI composition props plus the component’s native React attributes.