New: Activity Terrain +12 more
Kryptonite UI
3

Getting started

Introduction

Kryptonite UI is a set of 85 React components you copy into your project. They are built with Tailwind CSS, shadcn/ui and Base UI, and they handle loading, error and empty states for you.

Installation

Every component installs with one command, using the shadcn CLI. It copies the files into your project, installs the npm packages and anything the component builds on, and adds the theme styles. The code is yours to change.

  1. Start from a React project with Tailwind CSS v4 and shadcn/ui. In a new or existing app, run npx shadcn@latest init.
  2. Pick a component and run its command. For example:
npx shadcn@latest add https://kryptonite-ui.vercel.app/r/shimmer-button.json

To use short names instead of URLs, add the registry to your components.json:

{
  "registries": {
    "@kryptonite": "https://kryptonite-ui.vercel.app/r/{name}.json"
  }
}

Then install with npx shadcn@latest add @kryptonite/shimmer-button. Every component page also has the steps to install by hand.

Browse

Media · 1

Video player

Backgrounds · 1

Drape Background

Text · 1

Plucked Text

Credits

79 components, hooks and utilities come from HextaUI by Preet Suthar, used under the MIT license. The landing page background is Aurora from React Bits by David Haz. See THIRD_PARTY_NOTICES.md in the repository.