Luna

screenshot of Luna
react
tailwind
shadcn-ui

Shiny visual effects for your design system. In less than a minute.

Overview:

Luna is a free and open-source set of customizable React visual effects components designed for easy integration into dashboard-like software. Its primary audience is developers looking to enhance their software with sleek visual effects, and Luna aims to simplify this process by providing production-ready VFX that can be added to a design system in less than a minute.

Features:

  • Wrapper/child components
  • Tracing Border inspired by Nusu+Oguz
  • Top Light inspired by Resend
  • Frosted Glass background effect
  • Badge Reflection overlay inspired by Luxe
  • Blur+fade placeholder inspired by Luxe
  • Isolated lights (Spotlight inspired by Resend)
  • Isometric view containers (inspired by rauno.me)
  • Tilting 3D cards (inspired by Linear)

Summary:

Luna is a valuable resource for developers seeking to add visually appealing effects to their dashboard-like software. With a focus on providing production-ready VFX that can be effortlessly integrated into existing design systems, Luna simplifies the process of enhancing software aesthetics. Its customizable components, inspired by various sources, offer developers the flexibility to adjust colors, durations, and structure to suit their specific needs.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

shadcn-ui
Shadcn UI

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.