HomeBookmarks
Serenity UISerenity UI
Serenity UI

Serenity UI

Components that make the web feel alive.

ASby Ayushmaan Singh
23components1.6Mviews10.7Kbookmarks

Installs all 12 components. Without our CLI, run instead.

Auto-indexed

Serenity UI contents

  • Mechanical Keyboard

    Mechanical Keyboard

  • Masonry Lightbox

    Masonry Lightbox

  • Thumbnail Carousel

    Thumbnail Carousel

  • Type Testimonial

    Type Testimonial

  • Flame Button

    Flame Button

  • Image Stack Carousel

    Image Stack Carousel

  • Image Fan Carousel

    Image Fan Carousel

  • Portfolio Book

    Portfolio Book

  • Vintage KeyboardVintage Keyboard

    Vintage Keyboard

  • Toast

    Toast

  • Tech Stack

    Tech Stack

  • Typewriter TestimonialTypewriter Testimonial

    Typewriter Testimonial

  • Voice TestimonialVoice Testimonial

    Voice Testimonial

  • Pricing Section

    Pricing Section

  • Waitlist

    Waitlist

  • Newsletter

    Newsletter

  • Testimonials

    Testimonials

  • Theme Toggle

    Theme Toggle

  • Star Rating

    Star Rating

  • Feature Section

    Feature Section

  • Code block

    Code block

  • 3D Flip Card

    3D Flip Card

  • Tubelight NavbarTubelight Navbar

    Tubelight Navbar

    • That's all 23 components

    About Serenity UI

    Serenity UI publishes a shadcn registry at serenity-ui.com, with 12 components installable through the shadcn CLI.

    Components
    12
    GitHub stars
    49
    Last commit
    Sep 18, 2026
    Repository
    ayushmxxn/serenity-ui

    Also in the Serenity UI registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • brand-marquee

    • carousel-360

    • image-carousel

    • image-gallery

    • swipe-card

    From the Serenity UI readme

    Serenity UI Free, open source React, Canvas & WebGL components that make the web feel alive.

    Explore Components •
Discord Community •
Twitter / X

    Features

    • Copy & Paste: Add components via the shadcn CLI or copy source code directly.
    • Framework Support: Works with Next.js (App & Pages Router), Vite, Remix, Astro, and React 18/19.
    • Customizable: Built with standard Tailwind CSS classes and CSS custom properties.
    • Accessible: Semantic markup, ARIA compliance, and keyboard navigation.

    Quick Start

    1. Using shadcn CLI

    Install any component directly into your project using the shadcn registry:

    # npm
npx shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard

# pnpm
pnpm dlx shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard

# bun
bunx --bun shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard

    2. Manual Installation

    1. Browse components on serenity-ui.com.
    2. Click Code on any component to view its source.
    3. Copy the file into your components/ directory and install the listed dependencies.

    Component Collection

    Components

    ComponentDescriptionCLI Command
    Vintage KeyboardMechanical keyboard with real-time sound synthesis & 3D keycapsnpx shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard
    Portfolio BookInteractive sketchbook portfolio with 3D page flip physicsnpx shadcn@latest add ayushmxxn/serenity-ui/portfolio-book
    Flame ButtonFiery flame glow button with mouse tracking & fiery gradientsnpx shadcn@latest add ayushmxxn/serenity-ui/flame-button
    Carousel 3603D cylinder image carousel with drag and click rotationnpx shadcn@latest add ayushmxxn/serenity-ui/carousel-360
    Tubelight NavbarFloating island navbar with glowing lamp indicatornpx shadcn@latest add ayushmxxn/serenity-ui/tubelight-navbar
    Typewriter TestimonialShowcase card with typewriter effect & pen animationnpx shadcn@latest add ayushmxxn/serenity-ui/typewriter-testimonial
    Brand MarqueeContinuous logo marquee with edge fading and pause-on-hovernpx shadcn@latest add ayushmxxn/serenity-ui/brand-marquee
    3D Flip CardLayered card stack with spring-driven 3D fanningnpx shadcn@latest add ayushmxxn/serenity-ui/3d-flip-card
    Swipe CardGestural swipeable card stack with drag throw physicsnpx shadcn@latest add ayushmxxn/serenity-ui/swipe-card
    Image CarouselStacked parallax image carousel with peeling transitionsnpx shadcn@latest add ayushmxxn/serenity-ui/image-carousel
    Image GalleryExpanding image gallery with horizontal spring transitionsnpx shadcn@latest add ayushmxxn/serenity-ui/image-gallery

    Blocks

    BlockDescriptionCLI Command
    TestimonialMulti-row marquee with voice waveform audio & video dialognpx shadcn@latest add ayushmxxn/serenity-ui/testimonial

    Local Development

    To run the Serenity UI documentation site locally:

    # Clone the repository
git clone https://github.com/ayushmxxn/serenity-ui.git
cd serenity-ui

# Install dependencies
npm install

# Start development server
npm run dev

    Open http://localhost:3000 to view the site.

    Contributing

    Contributions are welcome! If you'd like to fix a bug or add a new component:

    1. Fork the repository.
    2. Create a feature branch (git checkout -b feature/new-component).
    3. Commit your changes (git commit -m 'feat: add new component').
    4. Push to the branch (git push origin feature/new-component).
    5. Open a Pull Request.

    License

    Serenity UI is free and open source under the MIT License.

    Read the rest on GitHub →

    What Serenity UI shipped recently

    Every appearance and removal our crawl has seen in the registry index.

    • 3d-flip-cardaddedSep 7, 2026
    • brand-marqueeaddedSep 7, 2026
    • carousel-360addedSep 7, 2026
    • flame-buttonaddedSep 7, 2026
    • image-carouseladdedSep 7, 2026
    • image-galleryaddedSep 7, 2026
    • portfolio-bookaddedSep 7, 2026
    • swipe-cardaddedSep 7, 2026
    • testimonialaddedSep 7, 2026
    • tubelight-navbaraddedSep 7, 2026
    • typewriter-testimonialaddedSep 7, 2026
    • vintage-keyboardaddedSep 7, 2026

    Registries like Serenity UI

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    coss

    coss

    by coss

    74

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Animate UI

    Animate UI

    by Elliot Sutton

    33

    components

    UI Layouts

    UI Layouts

    by UI Layouts

    127

    components

    Browse every shadcn registry we track →

    1. Components
    2. /
    3. Ayushmaan Singh
    4. /
    5. Serenity UI

    Related libraries

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    Efferd

    Efferd

    by Efferd

    114

    components

    shadcn/ui

    shadcn/ui

    by shadcn

    87

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    Geist

    Geist

    by tigran tumasov

    72

    components

    FR

    Freedom

    by Dhileep Kumar GM

    215

    components

    About Serenity UI

    Serenity UI is a component library on 21st.dev by Ayushmaan Singh with 23 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 23 Serenity UI components

    • 3D Flip Card
    • Code block
    • Feature Section
    • Flame Button
    • Image Fan Carousel
    • Image Stack Carousel
    • Masonry Lightbox
    • Mechanical Keyboard
    • Newsletter
    • Portfolio Book
    • Pricing Section
    • Star Rating

    Browse all component libraries →

  • Tech Stack
  • Testimonials
  • Theme Toggle
  • Thumbnail Carousel
  • Toast
  • Tubelight Navbar
  • Type Testimonial
  • Typewriter Testimonial
  • Vintage Keyboard
  • Voice Testimonial
  • Waitlist