Reline UI Open-Source React Component Library

Overview

Reline UI started from the usual problem rebuilding the same buttons, accordions, and dialogs from scratch on every new project but instead of stopping at a personal snippet collection, it became a properly packaged, installable library. The visual identity was the starting point, not an afterthought: glassmorphism and liquid motion, rather than another flat or minimal component kit. The library currently covers Button (primary, secondary, outline, danger, success variants), a frosted Glass Button, Accordion and a glassmorphic Glass Accordion, Alert Dialog, Callout, Tabs, and Media Card, plus a Theme Provider, Theme Switcher, and Theme Toggle so dark mode works out of the box across every component, not bolted on per-project. Under the hood, it's plain React (no TypeScript), styled entirely through Tailwind CSS with a shared cn utility (clsx + tailwind-merge) so class overrides never fight with the base styles, animated throughout with Framer Motion, and built with Vite into tree-shakeable ES modules using named exports only, a deliberate choice for predictable imports and smaller bundles. It targets React 19+. It's released on npm and MIT-licensed, with a documented contribution workflow (component folder convention, required docs.md, a submission checklist) so outside contributors can add components without breaking the system. The reline.vercel.app site is the public showcase and install point, and a separate small app, Zeaster, exists purely to verify that each published version actually renders and behaves correctly in a real consuming project before it ships. Stack: React, JavaScript, Vite, Tailwind CSS, Framer Motion, npm, Vercel

Key Features

• Component set covering buttons, glass buttons, accordions, glass accordions, alert dialogs, callouts, tabs, and media cards.
• Built-in dark mode via a Theme Provider, Theme Switcher, and Theme Toggle.
• Glassmorphism and liquid motion as the core visual identity, not a generic flat UI kit.
• Framer Motion animation on every interactive component, not just CSS transitions.
• Tailwind-first styling with a shared cn utility for safe class merging and easy overrides.
• Tree-shakeable, dependency-light ES module build via Vite.
• Named-export-only API for predictable imports and smaller bundles.
• Published and versioned on npm (reline-ui) for one-command installation.
• MIT-licensed and open to contributions, with a documented component workflow and submission checklist.

Process

1. 1Defined the core visual language glassmorphism and liquid motion before touching a component checklist
2. 2Set up the package with Vite, named exports only, and a shared cn utility (clsx + tailwind-merge)
3. 3Built the first component set: Button, Glass Button, Accordion, Glass Accordion, Alert Dialog, Callout, Tabs, and Media Card
4. 4Added a Theme Provider, Theme Switcher, and Theme Toggle so dark mode works out of the box library-wide
5. 5Animated every interactive state with Framer Motion instead of relying on CSS transitions alone
6. 6Documented each component's usage and props, and wrote a contribution guide with a folder-structure convention and submission checklist
7. 7Published the package to npm and built the reline.vercel.app site to showcase components and installation
8. 8Built Zeaster as a separate consuming app solely to verify published versions actually render and behave correctly outside the monograph.