HelioKit components — animated React + Tailwind UI

heliokitheliokitheliokit
heliokitheliokitheliokit

Copy-paste React + Tailwind components — animated, accessible, monochrome by default. Everything below is built from them.

GitHub
Featured

Six to start with

Click a card to bring it forward, then click it again to open. Built with Card Stack 3D.

Brutal Pricing previewMarketing
Brutal Pricing

Neo-brutalist pricing cards with hard shadows.

Click to expand
Crystal Text previewText
Crystal Text

Refracting glass headline that writes itself on.

Click to expand
Glitch Card previewCards
Glitch Card

RGB-split glitch animation on hover.

Click to expand
Pixel Spotlight previewEffects
Pixel Spotlight

Pixelated spotlight that decodes an image.

Click to expand
Social Grid previewLayout
Social Grid

Bento-style grid of social links.

Click to expand
Text Loader previewFeedback
Text Loader

Animated text-based loading indicator.

Click to expand
In motion

Hover to peek

Component names scroll by — hover one to reveal its preview. Built with Image Reveal Marquee.

AccordionBox Flip TextBrutal PricingCalendarCard StackCard Stack 3DCrystal TextCustom ToastsFlip FormAccordionBox Flip TextBrutal PricingCalendarCard StackCard Stack 3DCrystal TextCustom ToastsFlip FormAccordionBox Flip TextBrutal PricingCalendarCard StackCard Stack 3DCrystal TextCustom ToastsFlip FormAccordionBox Flip TextBrutal PricingCalendarCard StackCard Stack 3DCrystal TextCustom ToastsFlip Form
Focus HighlightGlitch CardGlossy DockImage Reveal MarqueeLiquid PlasmaMeteor ShowerNebulla BackgroundPixel SpotlightProduct CardSocial GridText LoaderText ReflectionFocus HighlightGlitch CardGlossy DockImage Reveal MarqueeLiquid PlasmaMeteor ShowerNebulla BackgroundPixel SpotlightProduct CardSocial GridText LoaderText ReflectionFocus HighlightGlitch CardGlossy DockImage Reveal MarqueeLiquid PlasmaMeteor ShowerNebulla BackgroundPixel SpotlightProduct CardSocial GridText LoaderText ReflectionFocus HighlightGlitch CardGlossy DockImage Reveal MarqueeLiquid PlasmaMeteor ShowerNebulla BackgroundPixel SpotlightProduct CardSocial GridText LoaderText Reflection
Questions

Good to know

The list below is the Accordion component, restyled to the theme.

Library

All components

Browse all 21.

Accordion

Collapsible panels with smooth height transitions.

Layout

Box Flip Text

3D box that rolls each word up as the next rises from below.

Text

Brutal Pricing

Neo-brutalist pricing cards with hard shadows.

Marketing

Calendar

Week view with drag-to-select slots and an animated composer.

Layout

Card Stack

Layered cards that shuffle on interaction.

Cards

Card Stack 3D

Perspective-driven 3D stack with depth and tilt.

Cards

Crystal Text

Refracting glass headline that writes itself on.

Text

Custom Toasts

Stackable, dismissible toast notifications.

Feedback

Flip Form

Form that flips between front and back faces.

Forms

Focus Highlight

Spotlight that follows focused elements.

Effects

Glitch Card

RGB-split glitch animation on hover.

Cards

Glossy Dock

macOS-style magnifying icon dock.

Navigation

Image Reveal Marquee

Infinite marquee revealing images on hover.

Media

Liquid Plasma

Interactive WebGL2 rainbow-frosting fluid backdrop.

Background

Meteor Shower

Animated falling-meteor starfield backdrop.

Background

Nebulla Background

Soft animated nebula gradient backdrop.

Background

Pixel Spotlight

Pixelated spotlight that decodes an image.

Effects

Product Card

E-commerce card with hover details.

Cards

Social Grid

Bento-style grid of social links.

Layout

Text Loader

Animated text-based loading indicator.

Feedback

Text Reflection

Headline with a mirrored, fading reflection.

Text

HELIOKIT

HELIOKIT

HELIOKIT

Monochrome components for builders