Drop the CDN script and stylesheet into a plain HTML page to use ready made UI components instantly.
Install the npm package to use the same components inside a Vite, Next.js, or Remix project.
Copy a single component's source file when you only need one piece, like a Button.
Use the prebuilt blocks, such as a login screen or pricing page, as a starting point for a new page.
| efolusi/meridian | 00kaku/gallery-slider-block | 3rd-eden/ircb.io | |
|---|---|---|---|
| Stars | 0 | — | — |
| Language | JavaScript | JavaScript | JavaScript |
| Last pushed | — | 2021-05-19 | 2016-11-16 |
| Maintenance | — | Dormant | Dormant |
| Setup difficulty | easy | easy | easy |
| Complexity | 2/5 | 2/5 | 2/5 |
| Audience | developer | general | developer |
Figures from each repo's GitHub metadata at analysis time.
No build step needed via CDN script tags, npm install works too for bundler based projects.
Meridian is an open source design system, meaning a large collection of ready made building blocks for building the visual side of websites and apps. It includes 109 accessible React components, such as buttons, forms, tables, and dialogs, along with 177 design tokens that define colors, spacing, and other visual details across light, dark, and a more compact layout mode. It also ships 9 pre built page sections and 8 full example apps. What makes Meridian notable is that it needs no build step at all. A developer can add a stylesheet and a single script tag to any plain HTML page and immediately start using the components, with no bundler, package manager, or configuration required. For projects that do use a bundler such as Vite or Next.js, the same components are also available as an npm package that can be imported normally. Developers can also copy the whole folder to own and edit the source directly, or copy just one component they need without pulling in the rest. The design language uses a warm, sand colored palette the author describes as "warm paper, espresso ink," built from an owl logo, along with a humanist typeface and subtle rounded corners. Every component and screen was made from scratch for this project rather than copied from an existing product. The library organizes its components into groups covering forms, general display, navigation, feedback such as dialogs and toasts, data display like tables and charts, overlays such as menus and drawers, an AI focused group with things like chat messages and tool call displays, code display, file handling, dates, and finance related widgets like a payment card. The example apps show these pieces put together into common types of products, including an AI workspace with a chat interface, an infrastructure console, file conversion tools, a trading dashboard, and admin and marketing pages. Switching to dark mode or a more compact density is done with a single HTML attribute rather than rebuilding the styles, and documentation covers theming, form validation timing, accessibility rules, and contribution guidelines. The project is written in JavaScript and released under the MIT license.
Meridian is a build step free, open source React design system with 109 components, 177 design tokens, prebuilt page blocks, and full example apps.
Mainly JavaScript. The stack also includes JavaScript, React, CSS.
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.