# Arclen UI

> React and HTML components with live controls. Tune each one to your brand, then install the code or copy one prompt into any coding agent.

Arclen UI has 25 components: 18 free and open source (MIT, https://github.com/cmrkby/arclen-ui-components) and 7 Pro. Every component ships React, standalone HTML and a framework-neutral core with the same settings. Pro costs $125 once or $90 a year. Team plans start at $216 a year or $300 lifetime for 3 seats.

## Install

- [Documentation](https://arclenui.dev/docs): install in Vite, Next.js or plain HTML.
- CLI: `curl -fsS https://arclenui.dev/arclen-ui.mjs -o arclen-ui.mjs && node arclen-ui.mjs add <slug> --origin https://arclenui.dev`
- shadcn registry item for free components: `https://arclenui.dev/r/<slug>.json`
- shadcn registry index: `https://arclenui.dev/r/registry.json`
- Agent brief for free components (install command, settings, usage): `https://arclenui.dev/r/<slug>.md`
- Agent skill: `https://arclenui.dev/skill.md`. Save it as `.claude/skills/arclen-ui/SKILL.md` (Claude Code) or in your agent's skills folder.
- [Arclen UI for coding agents](https://arclenui.dev/agents): setup for Claude Code, Cursor and Codex.
- Full text for agents: https://arclenui.dev/llms-full.txt

## Free components

- [Cascade Menu](https://arclenui.dev/components/cascade-menu): A sculpted radial navigation menu with eight editable actions, a moving light and keyboard support. Navigation. Free. Agent brief: https://arclenui.dev/r/cascade-menu.md
- [Center Split Transition](https://arclenui.dev/components/center-split-transition): A central counter and line open into two outward-moving panels. Transitions. Free. Agent brief: https://arclenui.dev/r/center-split-transition.md
- [Connected FAQ](https://arclenui.dev/components/connected-faq): An accessible, responsive FAQ with original interruptible motion. Accordions. Free. Agent brief: https://arclenui.dev/r/connected-faq.md
- [Editorial FAQ](https://arclenui.dev/components/editorial-faq): An accessible, responsive FAQ with original interruptible motion. Accordions. Free. Agent brief: https://arclenui.dev/r/editorial-faq.md
- [Gooey Switch](https://arclenui.dev/components/gooey-switch): A neutral liquid switch with a circular ivory thumb and optional elastic dragging. Controls. Free. Agent brief: https://arclenui.dev/r/gooey-switch.md
- [Grain Gradient](https://arclenui.dev/components/grain-gradient): Warm grain fields in opposing, flowing-ribbon or soft perimeter compositions with direct color controls. Backgrounds. Free. Agent brief: https://arclenui.dev/r/grain-gradient.md
- [Hold Switch](https://arclenui.dev/components/hold-switch): An ivory and graphite liquid switch with visible pressure and optional deliberate hold activation. Controls. Free. Agent brief: https://arclenui.dev/r/hold-switch.md
- [Pixel Sweep Transition](https://arclenui.dev/components/pixel-sweep-transition): A radial mosaic reveals image fragments with adjustable density and copy motion. Transitions. Free. Agent brief: https://arclenui.dev/r/pixel-sweep-transition.md
- [Split FAQ](https://arclenui.dev/components/split-faq): An accessible, responsive FAQ with original interruptible motion. Accordions. Free. Agent brief: https://arclenui.dev/r/split-faq.md
- [Split Type Transition](https://arclenui.dev/components/split-type-transition): A sliced-letter entrance with a fitted title and adjustable assembly timing. Transitions. Free. Agent brief: https://arclenui.dev/r/split-type-transition.md
- [Staggered Slats Transition](https://arclenui.dev/components/staggered-slats-transition): Staggered strips reveal the scene with a long, smooth decay. Transitions. Free. Agent brief: https://arclenui.dev/r/staggered-slats-transition.md
- [Status Swap](https://arclenui.dev/components/status-swap): An accessible local status button that becomes a green circle with a tick; optional rolling label appearance. Micro interactions. Free. Agent brief: https://arclenui.dev/r/status-swap.md
- [Tactical Button](https://arclenui.dev/components/tactical-button): Three graphite buttons with scattering text and staggered brackets: Classic, Scan and Shutter. Buttons. Free. Agent brief: https://arclenui.dev/r/tactical-button.md
- [Theme Reveal](https://arclenui.dev/components/theme-reveal): Soft Circle, Dissolve and upward Curtain appearance transitions with an independent full-page theme API. Transitions. Free. Agent brief: https://arclenui.dev/r/theme-reveal.md
- [Three Panel Transition](https://arclenui.dev/components/three-panel-transition): Three rising shutters with staggered timing and an independent image entrance. Transitions. Free. Agent brief: https://arclenui.dev/r/three-panel-transition.md
- [Signal Field](https://arclenui.dev/components/signal-field): A pointer-responsive WebGL field with editable colour, motion and grain. Backgrounds. Free. Agent brief: https://arclenui.dev/r/signal-field.md
- [Text Reel](https://arclenui.dev/components/text-reel): A masked phrase reel with original, readable and on-demand behavior presets. Typography. Free. Agent brief: https://arclenui.dev/r/text-reel.md
- [Halftone Portrait](https://arclenui.dev/components/halftone-portrait): Interactive image dots with photo detail, colour controls and a responsive cursor. Image effects. Free. Agent brief: https://arclenui.dev/r/halftone-portrait.md

## Pro components

- [Atmosphere Field](https://arclenui.dev/components/atmosphere-field): A procedural sky with soft cloud flow, sculpted horizons and colours you can make your own. Shaders. Pro.
- [Daylight Switch](https://arclenui.dev/components/daylight-switch): A standalone liquid switch with ivory daylight and original lunar material. Controls. Pro.
- [Glyph Field](https://arclenui.dev/components/glyph-current): A subtle grayscale ASCII light field with four sculpted forms, colour controls and pointer response. Shaders. Pro.
- [Morph Dropdown](https://arclenui.dev/components/morph-dropdown): A connected expanding selector with tapered light, a flowing smoke halo and configurable beam motion. Micro interactions. Pro.
- [Workflow Rail](https://arclenui.dev/components/workflow-rail): Four expanding process cards with connected silhouettes and colour blooms. Sections. Pro.
- [Bookmark Card](https://arclenui.dev/components/bookmark-card): Three sculpted bookmark cards with original artwork and hover lighting. Cards. Pro.
- [Feature Stack](https://arclenui.dev/components/feature-stack): Three scroll-pinned feature cards with original artwork and editable stories. Sections. Pro.

## Optional

- [Pricing](https://arclenui.dev/pricing): Free, Pro and Team access compared.
- [Source on GitHub](https://github.com/cmrkby/arclen-ui-components)