NeonKit
esc
  • IntroductionGetting started
  • InstallationGetting started
  • ThemingGetting started
  • Use with AIGetting started
  • All componentsGetting started
  • ButtonSolid, outline, soft, ghost and link buttons that light up on hover.Forms
  • InputText field with an animated neon focus ring, icons, labels and error states.Forms
  • TextareaMulti-line field that grows with its content and counts characters.Forms
  • SelectKeyboard-friendly listbox with a glowing popover and typeahead.Forms
  • CheckboxCheckbox with a drawn-on checkmark and indeterminate state.Forms
  • Radio GroupSingle choice from a set, with arrow-key navigation and card layouts.Forms
  • SwitchA toggle that powers on like a neon tube.Forms
  • SliderPointer and keyboard slider with a glowing track and optional range.Forms
  • OTP InputOne-time code input with auto-advance, paste and backspace handling.Forms
  • BadgeStatus labels with optional live dot and remove button.Data Display
  • AvatarProfile image with initials fallback, status light and stacked groups.Data Display
  • CardSurface with header, content and footer slots and a lit edge.Data Display
  • KbdKeyboard keys and shortcuts that glow when pressed.Data Display
  • TabsTabbed panels with a sliding light indicator and roving focus.Data Display
  • AccordionCollapsible sections with smooth height animation.Data Display
  • ProgressLinear and circular progress with a moving highlight.Feedback
  • SpinnerRing, dots and bars loaders in any neon color.Feedback
  • SkeletonLoading placeholders with a scanning shimmer.Feedback
  • AlertInline messages for info, success, warning and errors.Feedback
  • ToastStacked notifications with a tiny toast() API. No provider needed.Feedback
  • DialogAccessible modal built on the native dialog element.Overlay
  • TooltipHover and focus hints on four sides.Overlay
  • Neon TextText rendered as a glowing tube sign, with optional power-on flicker.Effects
  • Border BeamA beam of light that travels around any element's border.Effects
  • Spotlight CardCard whose border and surface light up under the cursor.Effects
  • Retro GridSynthwave perspective grid that scrolls toward the horizon.Effects

Components/Feedback

Progress

Linear and circular progress with a moving highlight.

Uploads

1 of 3 complete
  • q3-board-review.pdf

    8.4 MB · Uploaded

  • launch-hero@2x.png

    5.4 of 14.2 MB

  • brand-assets.zip

    11.3 of 126 MB

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/progress.json

Usage#

import { Progress } from "@/components/ui/progress"

<Progress value={64} label="Uploading brand-assets.zip" showValue />

Examples#

Indeterminate

Leave value undefined when you can't measure the work yet.

acme-web00:00
Deploying to production
Cloning repository…main · 7f3c2a1

Circular

CircularProgress renders children in the center, or the percentage with showValue.

72%used

Storage

36 of 50 GB

41%used

Bandwidth

410 GB of 1 TB

90%used

Build minutes

5,400 of 6,000

Sizes

Small
Medium
Large
58%
84%

API reference#

Progress

Also accepts every native div attribute.

PropTypeDefault
valuenumber

Current value. Undefined renders an indeterminate bar.

—
maxnumber

Value that counts as complete.

100
colorNeonColor

Palette name or hex. Falls back to --neon-accent, then cyan.

inherited
size"sm" | "md" | "lg"

Track height: 4, 8 or 12px.

"md"
indeterminateboolean

Slides a segment of light instead of showing the value.

false
labelReactNode

Text above the track, also used as the accessible name.

—
showValueboolean

Shows the rounded percentage at the right of the label row.

false

CircularProgress

Also accepts every native div attribute.

PropTypeDefault
valuenumber

Current value. Undefined renders a spinning arc.

—
maxnumber

Value that counts as complete.

100
sizenumber

Diameter in pixels.

64
thicknessnumber

Stroke width in pixels.

6
colorNeonColor

Palette name or hex. Falls back to --neon-accent, then cyan.

inherited
showValueboolean

Renders the percentage in the center.

false
indeterminateboolean

Spins a fixed arc instead of showing the value.

false
childrenReactNode

Custom center content. Replaces the percentage.

—

Accessibility#

  • Both components render role="progressbar" with aria-valuemin, aria-valuemax and aria-valuenow, and drop aria-valuenow while indeterminate.
  • label becomes the accessible name through aria-labelledby; without one, pass aria-label or it falls back to "Progress".
  • The sheen is hidden and the indeterminate animations slow down when the user prefers reduced motion.
PreviousAccordionNext Spinner