Server-side UI Components

JS #

I think that this whole trend (of UI components) started with React. Even so there were components before, like jQuery UI and in desktop and mobile applications, it is still fair to say that only with React concept got mainstream (in web development).

All JS UI components first of all meant for client-side. But all modern frameworks (React, Solid, Qwik etc.) support server-side rendering. See Components for Web.

With one exception - Astro.

Astro #

Astro components is the only server-side UI components. Even so there are not much pure Astro components:

• Accessible Astro Components
• Astro-Bootstrap
• Fulldev UI
• Related Astro Icon

I think this is because, Astro makes it very easy to use any other frontend framework, so there is no strong need for pure Astro components.

WebComponents #

I have to mention WebComponents…

• shoelace

Ruby #

I wrote about Rails UI components before.

PHP #

Laravel #

Component libraries:

• bladewindui - A collection of over 30 easy-to-customize but elegantly designed blade UI components for your Laravel projects.
• maryUI - gorgeous Laravel Blade UI Components made for Livewire 3 and styled around daisyUI + Tailwind
• DashUI offers a suite of UI components, all inspired by Shopify Polaris, exclusively crafted with TailwindCSS, Laravel Blade and Javascript.

Related:

• TALL stack - Tailwind, Alpine.js, Laravel, and Livewire. A full-stack development solution, built by Laravel community members.
• laravelviews - Laravel package to create beautiful common views like data tables for the TALL stack.
• Blade UI Kit is a set of renderless components to utilise in your Laravel Blade views. In all essence, it’s a collection of useful utilities, connecting the dots between different parts of the TALL stack
• Laravel Mix extension which lets you use blade components like Vue’s single file components.
• inertia. Create modern single-page React, Vue, and Svelte apps using classic server-side routing. Works with any backend — tuned for Laravel.

Symfony #

With Symfony and Twig it is also possible to create components. I didn’t find component libraries though.

Elixir #

Component libraries:

• primer-live - An implementation of GitHub’s Primer Design System for Phoenix LiveView
• SaladUI - inspired by shadcn/ui
• petal - Tailwind CSS, Alpine.js
• Bloom UI - Tailwind CSS
• Phoenix UI - Tailwind CSS
• Surface UI

Storybook-like:

• phoenix_storybook

Python #

In Python it seens idea haven’t got mainstream yet (or I didn’t find good examples):

• Django Packages: Components
• django-viewcomponent - inspired by Rails ViewComponent
• storybook-django
• Tetra - full stack reactive component framework for Django using Alpine.js

Conclusions and ideas #

• Trend 1: HTML over Wire
  • HotWire - Ruby
  • LiveWire - PHP
  • LiveView - Elixir
• Idea 1: while “HTML over Wire” is a popular idea it often follows REST convention. Now there is a new trend for “invisible” RPC, for example:
  • Qwik’s server$
  • Electric’s server
  • Phoenix LiveView
• Trend 2: backend components (as you saw above). Often combined with Tailwind CSS and Alpine.js
• Idea 2: Mitosis is compiler for client side components to translate from Mitosis to specific framework, like React, Vue, Alpine.js etc. It would be nice to have similar compiler for backend components, like Astro, Phlex, Blade, Phoenix etc.

Read more: Rails UI components, Components for Web