# List of modular UI technologies **URL:** \ **Category:** Social experience design 馃幁\ **Tags:** list\ **Created:** [February 21, 2024, 8:09am UTC](https://discuss.coding.social/t/list-of-modular-ui-technologies/501 "2024-02-21T08:09:43Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![aschrijver](https://discuss.coding.social/user_avatar/discuss.coding.social/aschrijver/32/3_2.png) [@aschrijver](https://discuss.coding.social/u/aschrijver)\ **Post date:** [February 21, 2024, 8:09am UTC](https://discuss.coding.social/t/list-of-modular-ui-technologies/501/1 "2024-02-21T08:09:43Z")
This list topic is for collecting resources and projects that focus on modular and composable UI technologies. ---
**Author:** ![aschrijver](https://discuss.coding.social/user_avatar/discuss.coding.social/aschrijver/32/3_2.png) [@aschrijver](https://discuss.coding.social/u/aschrijver)\ **Post date:** [February 21, 2024, 8:18am UTC](https://discuss.coding.social/t/list-of-modular-ui-technologies/501/2 "2024-02-21T08:18:26Z")
## [Block protocol](https://blockprotocol.org/) by Hash.ai _The open standard for block-based apps. The **脼 Block Protocol** enables applications to make their interfaces infinitely extensible with interoperable components known as blocks._ This technology was once evaluated by [Github Next](https://blocks.githubnext.com/), but deprioritised. Wordpress has a plugin that supports integration of blocks in the UI. Blocks can be developed as React, Vue and WebComponents in addition to a Blocks specification, and using SDK鈥檚. > **[Block Protocol](https://blockprotocol.org/)** > > An open standard for data-driven blocks The parent company Hash.ai uses the technology to support rich knowledge graphs, focusing on particular domains: [https://hash.ai/](https://hash.ai/) ## [Github Blocks](https://blocks.githubnext.com) _Reimagine repositories. Extend your codebase with custom, interactive blocks. Build rich documentation, enhance your workflows, and bring your repository to life._ ![Snapshot showing a composed UI based on contributor metrics collected from Github.](https://discuss.coding.social/uploads/default/original/2X/0/027723ebabbe7404f8637b6e12a83483e23d76f9.jpeg) > Though the technical preview was [discontinued](https://gist.github.com/idan/325676d192b32f169b032fde2d866c2c?permalink_comment_id=4825783#gistcomment-4825783) the source code is still available.. > > - [GitHub - githubnext/blocks-platform: The main prototype for GitHub Blocks 路 GitHub](https://github.com/githubnext/blocks-platform) > - [GitHub - githubnext/blocks: A set of files to use as input for Blocks. 路 GitHub](https://github.com/githubnext/blocks) > - [GitHub - githubnext/blocks-runtime: runtime support for Blocks 路 GitHub](https://github.com/githubnext/blocks-runtime) > - [GitHub - githubnext/blocks-dev 路 GitHub](https://github.com/githubnext/blocks-dev) > - [GitHub - githubnext/blocks-template: A template for creating custom Blocks. 路 GitHub](https://github.com/githubnext/blocks-template) > - [GitHub - githubnext/blocks-vanilla-template: A template for creating custom Blocks. 路 GitHub](https://github.com/githubnext/blocks-vanilla-template) ---
**Author:** ![aschrijver](https://discuss.coding.social/user_avatar/discuss.coding.social/aschrijver/32/3_2.png) [@aschrijver](https://discuss.coding.social/u/aschrijver)\ **Post date:** [February 21, 2024, 8:25am UTC](https://discuss.coding.social/t/list-of-modular-ui-technologies/501/3 "2024-02-21T08:25:13Z")
## [Micro front-ends and composable front-end architectures](https://microfrontend.dev/) _Micro-frontends are the result of breaking down large user interfaces into smaller, more manageable and independently deployable pieces, with [benefits](https://microfrontend.dev/architecture/micro-frontends-pros-and-cons) at an organizational level._ This website is a collection of patterns & practices by Natalia Venditto. Though it is a rather random collection, it provides some good ideas on various approaches to modularization. ---
**Author:** ![aschrijver](https://discuss.coding.social/user_avatar/discuss.coding.social/aschrijver/32/3_2.png) [@aschrijver](https://discuss.coding.social/u/aschrijver)\ **Post date:** [February 21, 2024, 8:33am UTC](https://discuss.coding.social/t/list-of-modular-ui-technologies/501/4 "2024-02-21T08:33:51Z")
## [Atomic Design](https://atomicdesign.bradfrost.com/) by Brad Frost _Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team鈥檚 design and development workflow._ ![Design System framework goes from Atoms, to Molecules, to Organisms, to Templates, to Pages](https://discuss.coding.social/uploads/default/original/1X/1d6d0440b6b9f937ff96a17b1b794ff21bcb05df.png) > ### Table of Contents > > 1. [**Designing Systems** : Create design systems, not pages](https://atomicdesign.bradfrost.com/chapter-1) > > 2. [**Atomic Design Methodolog** y: Atoms, molecules, organisms, templates, and pages](https://atomicdesign.bradfrost.com/chapter-2) > > 3. [**Tools of the Trade** : Pattern Lab and the qualities of effective style guides](https://atomicdesign.bradfrost.com/chapter-3) > > 4. [**The Atomic Workflow** : People, process, and making design systems happen](https://atomicdesign.bradfrost.com/chapter-4) > > 5. [**Maintaining Design Systems** : Making design systems stand the test of time](https://atomicdesign.bradfrost.com/chapter-5)