A shadcn/ui registry of opinionated React components, from WebGL shaders and animated backgrounds to footers, 404 pages and a gooey colour picker, installed by CLI so you own the code.
components
23rd.dev
Pele
pele.run
Pele renders Mermaid diagram syntax to SVG and themes the result with CSS variables instead of a theme configuration.
What is Pele?
Pele is a small library, developed for Obsidian, that takes Mermaid text and returns an SVG string from a single render() call. Its comparison table claims zero dependencies, a 230 kB gzipped bundle versus Mermaid.js at 1.6 MB, and render times of 0.05 to 0.3 ms, while supporting every diagram type built into Mermaid 12.1.0.
Instead of theme settings, you set variables such as --pele-bg, --pele-fg and --pele-line on a .pele class, and colour changes apply without re-rendering. Layout also adapts to small screens rather than scaling the whole diagram down, and the package installs through npm, pnpm, yarn or bun.
Best for
- Obsidian plugin and theme developers rendering diagrams fast
- Apps that need Mermaid output matching an existing CSS theme
- Documentation sites where diagram rendering speed matters
Key features
- render() converts Mermaid syntax into an SVG string
- Zero direct dependencies and a 230 kB gzipped bundle
- Supports every diagram type in Mermaid 12.1.0
- CSS variable theming applies without re-rendering
- Layout adapts on small screens instead of scaling
Related resources
23rd.dev
About 130 hand-crafted animated React components built with Tailwind CSS v4 — text effects, backgrounds, cards, widgets and bento grids — installed with the shadcn CLI.
components
animata.design
Visitopens in a new tabAnimate UI replaces shadcn/ui primitives with animated versions built on Radix UI, Base UI and React Aria, driven by Motion.
components
animate-ui.com
Visitopens in a new tab