Pinned "How it works" section. A marker travels along a half circle from step to step as you scroll, the passed arc draws in, and the whole section flips to each step's solid color.
Loading preview...
"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
import { ArcSteps } from "@/components/ui/tweenly-arc-steps"
const steps = [
{ title: "Install", description: "One command adds the component and its dependencies to your project.", color: "#0a0a0a", foreground: "#ededed" },
{ title: "Customize", description: "It's your code. Tweak props, colors and timing until it feels like yours.", color: "#ff4d12", foreground: "#0a0a0a" },
{ title: "Ship", description: "Server-rendered, accessible and light. Deploy it with the rest of your app.", color: "#f5f0e8", foreground: "#0a0a0a" },
{ title: "Iterate", description: "Pull updates when you want them, keep your changes when you don't.", color: "#1f3a2e", foreground: "#f5f0e8" },
]
export function Demo() {
return (
<ArcSteps steps={steps} />
)
}
function SourceSpecimen(){return <Demo/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}