Preview supplied by Rare UI / Swami Malode. Preview: creator supplied · rights cleared.

Code Block

A code block that derives its full syntax theme from one accent color and includes animated copy feedback.

Why it stands out

A syntax-highlighted code block whose background, tokens, and accents are generated from one color. The copy control springs into a confirmation check.

Discovery vocabulary

Component React

Related by governed terms

Continue comparing

Componentsopen source

Signature

An animated SVG signature effect that draws out text as if hand-written.

by Componentry0React · TypeScriptSource

Componentsfree

Scroll Progress

A scroll progress pill that tracks reading position and expands into a squircle menu of page sections.

by Rare UI0React · TypeScriptSource

Componentsfree

Bounce sidebar

A vertical navigation list with a bouncy, spring-animated active indicator.

by Rare UI0React · TypeScriptSource

Componentsfree

OTP Input

A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.

by Rare UI0React · TypeScriptSource

Componentsfree

PullCord

A cloth cord that really hangs. Pull it to switch the lights.

by FeralUI0React · TypeScriptSource

Componentsopen source

Scroll Choreography

A smooth, scroll-driven image choreography component using Framer Motion.

by Componentry0React · TypeScriptSource

Scroll Progress

A scroll progress pill that tracks reading position and expands into a squircle menu of page sections.

by Rare UI0React · TypeScriptSource

Componentsfree

Bounce sidebar

A vertical navigation list with a bouncy, spring-animated active indicator.

by Rare UI0React · TypeScriptSource

Componentsfree

OTP Input

A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.

by Rare UI0React · TypeScriptSource

Componentsfree

Folder component

An animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size props.

by Rare UI0React · TypeScriptSource

Componentsfree

Fluid Orb

An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.

by Rare UI0React · TypeScriptSource

Componentsfree

Gravity Letters

A playful gravity field where letters, numbers, emoji, or custom components fall and pile up like physical objects.

by Rare UI0React · TypeScriptSource