Modern, flashy React UI components for your next project

Star on GitHub

85 free, open-source animated components for Next.js, built with Tailwind CSS, shadcn/ui and Base UI. Copy them in and make them yours.

Works with

ClaudeCursorVS CodeCodexshadcn/uiGitHub CopilotNext.jsReactTailwind CSSTypeScriptVercel

Hero.tsx

1import SpecularButton from './SpecularButton';
2 
3<SpecularButton
4  size="lg"
5  radius={18}
6  tint="#ffffff"
7  tintOpacity={0.04}
8  textColor="#f5f5f5"
9  lineColor="#ffffff"
10  baseColor="#525252"
11  intensity={1}
12  idleIntensity={0.35}
13  shineSize={10}
14  shineFade={34}
15  thickness={1.2}
16  glow={1}
17  followMouse
18  proximity={250}
19>
20  Get Started
21</SpecularButton>

Preview

Presets

Just added

The newest components in the library, updated as they land.

Apple Activity CardNew

Components85+ free

Free animated components for React and Next.js

Copy-paste or install with one command. Built with Tailwind CSS, shadcn/ui and Motion, free for any project.

Show more components

Why Kryptonite UI

Looks great out of the box. Stays easy to change.

85components,
all free and open source

your-app

components

kryptonite

ShimmerButton.tsx

ShimmerButton.tsxCopy

Copy and paste, no package

Every component is a single file you copy into your project. No npm package to install or upgrade, and the code is yours to change.

SaveShareDelete

Tab↵Esc

Accessible by default

Built on Base UI primitives, so keyboard navigation, focus management and screen reader support come built in.

Click it: loading, then success

States already handled

Loading, success, error and empty states are part of the components, not something you wire up later.

Next.js

React 19

Tailwind CSS v4

TypeScript

shadcn/uiBase UIDark and light mode

Made for Next.js and Tailwind CSS

Works with the Next.js App Router, React 19, Tailwind CSS v4 and shadcn/ui. Theme it with CSS variables.

See how to add your first component

Frequently asked questions

What is Kryptonite UI?

Kryptonite UI is a free, open-source collection of modern, animated React components. You copy each component into your project instead of installing a package, then style and change it however you like.

Is Kryptonite UI free?

Yes. Kryptonite UI is free and open source under the MIT license, including for commercial projects.

Does it work with Next.js and Tailwind CSS?

Yes. The components are built for React and the Next.js App Router, and styled with Tailwind CSS v4. They also work in any React project that uses Tailwind CSS.

Do I need shadcn/ui to use it?

No, but it fits right in. Kryptonite UI follows the shadcn/ui approach and uses Base UI primitives, so it works alongside an existing shadcn/ui setup or on its own.

How do I add a component to my project?

Open the component in the docs, install the listed npm dependencies, and copy the component file into your project. Each docs page shows a live preview, the full source and usage examples.

Can I request a new component?

Yes. Post a request in the Community section. Others can upvote it, which helps decide what gets built next.

Help shape what we build next.

Join the community to share feedback, request the components you need, and show what you built. Reply to others and upvote the ideas you want most.

Join the community Browse components