beko2210/elementa

Elementa is a free, open source library of ready-made UI components such as buttons, cards, loaders, inputs, toggles, and background effects. Instead of installing a package into your project, you browse a website, look at a live interactive preview of each component, and copy the code straight into your own project. There is no npm install and no build step required to use the components themselves. Unlike libraries built only for React, Elementa's components are framework agnostic, built on plain HTML and CSS so they can be used with Tailwind, React, Vue, or Svelte projects. Every component has a live, hands-on preview you can interact with before copying it, including hover states and animations, and the project pays attention to accessibility with checked color contrast and visible focus states. The library includes over 70 components with a search and filter system, keyboard shortcut command palette for quick navigation, and accounts that let people upload their own components and like, favorite, or comment on others. The site itself is self-hosted in the EU, is compliant with European data protection rules, and uses only first-party, consent-based analytics rather than third-party trackers like Google Analytics. The website running Elementa is built with Next.js, React, and TypeScript, styled with Tailwind CSS, animated with Framer Motion, and uses Appwrite as its backend for accounts, the component database, and file storage. Running your own copy of the site requires Node.js and an Appwrite project, either self-hosted or on Appwrite's cloud, along with some setup scripts to create the database structure and load in starter components. The project is released under the MIT license, and its stated goal is to be a fair, privacy-respecting alternative to other component gallery sites for developers, designers, and agencies.