Pro components

Interactive and textured components, installed with a personal token from your account.

Pro components react to the pointer and to scroll, or draw textures the free set doesn't, such as glass, dither and light shafts. They install as source code, like the free ones. Plans are on the pricing page.

  • Border BeamA short beam of dithered light that travels around a card's border, spilling a little light inward.
  • ContourHairline contour lines flowing over a slowly breathing terrain.
  • Cursor GlowA dithered spotlight that follows the pointer across a field of unlit dots.
  • Dither AvatarsOverlapping avatars in halftone dither. Hovering or focusing one resolves it into the photo and names it.
  • Dither ChartAn area chart filled with ordered dither, hot along the line and sparse at the baseline, with a lit column under the active point.
  • Dither GradientA dusk sky dithered in your exact palette.
  • Dither ProgressA progress bar whose fill climbs the palette toward a hot leading edge that breaks into pixels. Indeterminate mode sweeps a dithered comet.
  • Dither RevealAn image held in a few dithered palette tones that dissolves, cell by cell, into the real photo on hover, focus or scroll.
  • EclipseA total eclipse with a diamond-ring bead and a slowly turning corona.
  • Glass PanelFrosted glass over a live dither field: crisp pixels around the panel, melted colour through it, and a sheen that follows the pointer.
  • Glow CommandA command menu whose active row is lit from its left edge by dithered light.
  • Glow TabsUnderline tabs where dithered light rises from the active line. Full keyboard support.
  • God RaysSoft shafts of light falling through haze from a high window.
  • Light TrailsA long-exposure bundle of light trails sweeping across the frame.
  • Liquid BlobA drop of liquid chrome slowly reshaping in a studio.
  • OscilloscopeA Lissajous figure turning on an analogue oscilloscope.
  • PrismPrism light falling across a wall, splitting into its spectrum.
  • Reeded GlassSoft light refracted through a pane of fluted glass.
  • RisographA two-ink risograph print with halftone screens and misregistration.
  • Scroll StirA topographic map in hairline contours and dithered elevation. A fast scroll twists the terrain, then it settles.
  • Spotlight GridOne dithered light under a grid of cards. It follows the pointer across the gaps and catches each card's hairline border.

21 components and 168 presets today. New Pro components and presets are added to the same license.

Setup

  1. Buy Pro on the pricing page while signed in. It's linked to that account.

  2. Create a personal token on your account page and put it in .env:

    GRADIENTS_TOKEN=gcn_pat_your-token
  3. Add both registries to components.json. Pro components use the engine from the free registry.

    {
      "registries": {
        "@gradients.sh": "https://gradients.sh/r/{name}.json",
        "@gradients-pro": {
          "url": "https://gradients.sh/r/pro/{name}.json",
          "headers": { "Authorization": "Bearer ${GRADIENTS_TOKEN}" }
        }
      }
    }

Then install any Pro component by name:

npx shadcn@latest add @gradients-pro/god-rays

Always install Pro components by name. The CLI only sends the token for names in a configured registry.

If the install fails

ErrorCause
"Registry requires the following environment variables"The CLI can't see GRADIENTS_TOKEN. Set it in .env or your shell.
401No token was sent, usually because you installed by URL instead of name.
403The token is wrong or revoked, or the account no longer has Pro.