Build with
Arclen UI.

01. Getting started

Arclen UI is a library of components you can preview, customize and install. Each component includes its own JavaScript, styles and assets, so it runs independently in your project.

1. Browse the catalogue and open a component.
2. Open Customize to adjust its appearance and behavior.
3. Choose React or HTML in the delivery bar below the preview.
4. Install the source or download the HTML bundle, then add it to your page.

Free components are MIT licensed. You can preview and customize Pro components, but their source and downloads require access. Pro membership is coming soon. See Arclen UI Pro.

02. Make it yours

The tweak panel updates the preview as you work. Start with a preset, then change the available colors, text, images and motion settings. The desktop and mobile preview buttons help you check the result at different sizes.

In the delivery bar, Copy configured usage includes your current settings. The component’s API reference lists its properties, types and defaults; Usage notes covers behavior specific to that component.

An uploaded image stays local to your browser preview. Add that image to your own project and replace its temporary blob URL before shipping. Keep the supplied asset licences with any artwork you use.

Components respect reduced motion and pause animation when off screen. Preview pause, replay and device size are inspector controls; they are not exported as component settings.

03. React & Vite

Use an existing React TypeScript project, or create a new Vite app:

npm create vite@latest my-site -- --template react-ts
cd my-site
npm install

1. On the component page, choose React, then Copy install command from the Copy menu.
2. Run the command from your project directory. It writes the source to components/<component-id> and includes styles and assets.
3. If the installer lists dependencies, install those exact versions using the command it prints.
4. Choose Copy configured usage and paste it into your page. Adjust the import path to match your project.
5. Run npm run dev and check the component in your layout.

The copied example uses the @/components/… alias. A default Vite app does not include that alias. Use a relative import instead. For example, from src/App.tsx with the component installed at the project root:

import { SignalField } from "../components/signal-field";

The installer refuses to overwrite existing component files. Keep your edited source safe before replacing or installing a newer copy.

04. Next.js

In your Next.js project, use the same React install command and configured usage. The supplied wrapper is a client component and mounts its renderer after hydration.

If your app uses src/ and the @/* alias points there, append --directory src to the install command so the source lands in src/components. Otherwise, update the copied import to the location you installed.

You can import the wrapper into an App Router page with serializable settings. When your own page uses state or event handlers to change those settings, put "use client" at the top of that file.

"use client";

import { SignalField } from "@/components/signal-field";

export default function Example() {
  return <SignalField />;
}

Replace the default example with the configured usage from your component page. Its wrapper imports the component stylesheet for you.

05. HTML

Choose Download HTML in the Copy menu. The ZIP contains component.html, component.css, component.js, assets, a poster and a manifest. No framework or build step is needed.

1. Extract the complete bundle into a directory on your site.
2. Serve it with your usual local development or static HTTP server, then open component.html.
3. To embed it in another page, copy the component markup and load its CSS and JavaScript.
4. Preserve the bundle’s relative asset paths, or update them for the new location.

<link rel="stylesheet" href="./component.css">
<!-- Copy the markup from component.html here. -->
<script src="./component.js" defer></script>

Keep the included poster fallback in the markup for visitors without JavaScript. The downloaded bundle carries the settings you chose in the preview.

06. Work with an AI agent

Choose Copy AI prompt in the Copy menu and paste it into your coding agent. It includes the component version, installation command, documentation link and your current settings.

Give the agent the page or section where the component belongs. Ask it to check import paths and dependencies, then verify the result in your project at desktop and mobile sizes.

If browser clipboard access is unavailable, the delivery panel shows a field where you can select and copy the text manually.

07. Using Arclen

The Arclen Builder integration is being built separately. Once available, free components and Pro components you have access to will appear in its Components panel.

The design canvas will show a poster. Preview and published pages will run the component’s own JavaScript, with settings from the same component manifest used here.

The Use in Arclen action stays hidden until that integration is available. For now, use the React install or HTML download in your own project.