NK

Search

Search pages, posts, and components

Component Library

Beautifully crafted components

65 open-source components you can copy, paste, and own. Accessible, themeable, and built with Tailwind CSS + motion.

02:05

Countdown Timer

Data Display

Counts down from a duration and fires a callback at zero.

Ship faster

Carousel

Navigation

A slide carousel with arrows and dot indicators.

TypeScriptFlutterNest.jsRust

Card Marquee

Animation

An infinite marquee of any children, horizontal or vertical.

Dropped it in on Friday, shipped on Monday.

GHGrace HopperCTO, Ledger

A customer quote, as a bordered card or a plain pull quote.

The offline sync just works - we stopped writing our own.

ALAda LovelaceStaff Engineer, Orbit

Dropped it in on Friday, shipped on Monday.

GHGrace HopperCTO, Ledger

A looping marquee of testimonial cards, horizontal or vertical.

Hover me

A floating panel that springs along with the cursor.

NAWALNAWAL

An outlined wordmark with a pointer-tracking glow and a looping shimmer.

$pnpm dlx shadcn@latest add @canvas-ui/particle-scroll-react

Install Command

Data Display

A terminal block with package-manager tabs and a copy button.

Fireworks

Background Effects

Auto-launching firework bursts painted on a canvas.

Open to ContractOpen to FreelanceOpen to Full-timeOpen to Contract

Rotating Status

Data Display

A pill that cycles availability statuses beside a pulsing live dot.

5
128
4
64
3
22
2
9
1
4

Rating Bars

Data Display

A review-score distribution whose bars fill in sequence.

1219822142718

Bar Chart Mini

Data Display

A compact bar chart whose bars grow in sequence and show values on hover.

DesignBuildQA

Stacked Progress

Data Display

A stacked bar whose coloured segments grow in one after another.

Otp Input

Inputs

A one-time-code input where focus auto-advances as you type.

Pill Tabs

Navigation

A pill tab bar where the raised pill slides to your selection.

A 1-5 emoji scale that pops the face you select.

Scheduled maintenance this Sunday at 02:00 UTC.

A notice bar that drops in and can be dismissed.

A card-shaped loading placeholder built from pulsing blocks.

Changes saved

Your draft is up to date.

Toast

Feedback

A toast that slides in and can be dismissed.

Drag & drop files here

PNG, JPG or PDF up to 10MB

File Drop

Inputs

A drop zone whose upload icon bobs, inviting a drag.

  1. 1Install the package
  2. 2Add the provider
  3. 3Ship it

An ordered list whose numbered badges pop in sequence.

  • Unlimited projects
  • Priority support
  • Custom domains

A feature checklist whose rows slide in and checks pop.

FlutterDartNext.jsRustSEO

Tag Cloud

Data Display

A cloud of weighted tags that drift in and pop on hover.

Token expires soon

Rotate it before Friday to avoid downtime.

A callout that slides in, its icon popping to draw attention.

A joined, segmented button group.

Social Links

Navigation

A row of circular icon links for social profiles.

Dot Pagination

Navigation

Dot pagination where the active dot stretches into a pill.

or continue with

A horizontal divider with a centred label.

A star rating you can click, with hover preview.

main.dart
void main() {
  runApp(const App());
}

A macOS-style window frame around a code block.

Button with an animated conic gradient border and hover shimmer.

A button with a light sweep that shimmers across on hover.

A button magnetically attracted to the cursor while hovered.

Aurora

Aurora Background

Background Effects

A container with a slowly drifting aurora gradient behind its content.

Wavy Text

Typography

Each letter bobs up and down in a continuous wave.

A circle and checkmark that draw themselves in.

A heart that pops and bursts particles when liked.

Loading your workspace

Text Shimmer

Typography

Text with a light sheen sweeping across it.

Particle Field

Background Effects

A canvas field of drifting, twinkling particles.

Constellation

Background Effects

Canvas nodes that drift and link with lines when near.

Reveals text character-by-character with a GSAP stagger.

Every component, with source.

An accordion that animates panel height and chevron.

Pro plan

Everything, unlimited.

Gradient Border

Background Effects

A card wrapped in a rotating conic-gradient border.

Pulse Dot

Data Display

A status dot with a pulsing halo.

Blur Text

Typography

Reveals text word-by-word with a blur-to-sharp transition.

Reveals the newly themed page through a circle expanding from the button.

NKALGHIJ

Joined by 2,400+ developers

Social Proof

Data Display

Overlapping avatars that pop in sequence beside a proof line.

Sun and moon segments with a thumb that glides between them.

Nav Tabs Count

Navigation

Underline tabs with counts; the underline glides on click.

Slider

Inputs

Range slider whose fill and thumb follow the value on a spring.

A row of chips where clicking one makes it the active filter.

Draft Engine

Collaborative MDX editing with offline sync.

A card that springs up and scales slightly on hover.

quarterly-report.pdf68%

2.4 MB

Upload Progress

Data Display

A file row whose progress bar fills smoothly to its value.

2

Quantity stepper whose number pops in the direction it moved.

Infinity

Days

NaN

Hours

NaN

Mins

NaN

Secs

Countdown Boxes

Data Display

Unit boxes that flip in, then tick down to a target time.

Orbit
Ledger
Quill
Atlas
Pulse
Draft

A trusted-by grid whose wordmarks fade in and sharpen on hover.

Icon Tabs

Navigation

Icon-only tab bar where the raised tab slides to your pick.

NKALGH+2

Avatar Group Add

Data Display

Overlapping avatars with a + button that pops new ones in.

Bell button that rings on click and clears its unread badge.

Builttobecopied,pasted,andowned.

Word Reveal

Animation

Reveals a sentence one word at a time as it enters.

Orbit Analytics

Sub-second queries over billions of events.

Card that tilts in 3D toward the pointer.

0

Animated Counter

Data Display

Number that counts up to its value on mount.

Loading your workspace…

Shimmer Text

Typography

Text with a highlight band travelling across it.

Copies a value and confirms with an icon swap.

Ledger UI Kit

60+ accessible components.

Glow Card

Background Effects

Card with a radial highlight that tracks the pointer.