Introduction
HelioKit is a set of copy-paste React + Tailwind components — animated, accessible, and monochrome by default. No install, no lock-in: paste the file and ship.
What it is
HelioKit is not a dependency you import — it is source you own. Every component ships as a single, self-contained file you drop into your project. Add it with the CLI or copy the code by hand. Once it lands in your repo, it is yours to restyle, fork, or delete.
Why copy-paste
- No version lock. The component lives in your codebase, not in
node_modules. Upgrades never break you. - Plain Tailwind + props. Restyle by editing classes — no theme layer to fight.
- Monochrome by default. Components read from CSS tokens (
text-primary,background-primary,border-primary), so they adapt to your palette and light/dark. - Animated & accessible. Motion via Framer Motion, with sensible keyboard and ARIA behaviour baked in.
What's inside
The library spans layout, cards, text effects, backgrounds, forms, feedback, and navigation — from an Accordion to a Meteor Shower backdrop. Browse them all on the Components page; each has a live preview, install steps, and a props table.
Two ways to add a component
Use the CLI (npx heliokit@latest add <name>) to copy a component into your project, or open any component page and copy the source manually. Both paths give you the same file.Requirements
- React 18 or 19
- Tailwind CSS v4
- Most components use
framer-motionandlucide-react— the CLI installs these for you.