loomiui
Open sourceBuilt with Lit

Beautiful components.
Built for every frontend.

LoomiUI is a framework-agnostic Web Component library built with modern standards and styled your way.

Get Started Explore Components
Workspace accessInvite your team
Send invitation
Framework agnostic
Works with any stack
Accessible foundation
Keyboard-ready patterns
Customizable
CSS variables
Light & Dark
Theme ready
TypeScript
Fully typed
Modular
Install per component

One component library for every frontend stack

Write once. Use anywhere.

App.jsx
<loomi-button radius="full">
  Save User
</loomi-button>
Save User
App.vue
<loomi-button radius="full">
  Save User
</loomi-button>
Save User
App.svelte
<loomi-button radius="full">
  Save User
</loomi-button>
Save User
index.html
<loomi-button radius="full">
  Save User
</loomi-button>
Save User

Works with React, Vue, Svelte, Angular, Solid, Qwik and any web project.

See all integrations
Core building blocks

From a single control to a complete workflow

A representative set of LoomiUI primitives. Browse the gallery when you need the full catalog.

Button
Button
Input
Select
Open Modal This modal is the actual @loomidev/modal package — not a screenshot.
Modal
Table
Success! Your changes were saved.
Alert
Chart
Calendar
Explore all components Try the Playground

Themed with CSS variables

Fully customizable. Works with your design system.

Primary
Light
Primary
Dark
Primary
Primary
Auto (System)
Primary
Brand
Learn how theming works
Live product proof

Two real product workflows, built from LoomiUI.

Explore an operations dashboard and a collaborative project workspace. Both use live LoomiUI components wired into realistic product interactions.

LoomiUI proof workspace

Operations command

Good morning, Alice

Route revenue $318,920 +8.7% this week Open orders 186 32 ready to pack Fulfillment SLA 97.4% Above target Driver score 4.8 From 2,408 ratings
Fulfillment pulse Orders picked, packed, and handed to drivers. Traffic source Orders by intake channel.
Retail portal46%
Field reps31%
Phone desk23%
Warehouse crew Live shift roster and current assignment.

Project overview

Dashboard

Total tasks42+12% from last week In progress14+8% from last week Completed24+20% from last week Overdue42 need owners
Tasks by status Current sprint shape. Task activity Completed, created, and moved this week.
Project overview
AgriConnect Platform Mobile Redesign Internal Tools
Recent activity
  • You completed "Update privacy policy page"
  • Kofi moved "Integrate SMS notifications"
  • Ama created "Create UI style guide"

Want to test individual properties instead?

Open the Playground

Alice Wonderland

Supervisor - Operations command

Save profile
Compact density Fit more operational rows on screen.
Daily digest Send a morning delivery summary.
Keyboard shortcuts Enable power-user navigation.

Task

Status Team - Due date - Assignee
Reassign Mark as done
Cancel Add task

Choose your starting point

Use the open library. Add Pro when the product needs more.

The same LoomiUI component foundation supports both paths, so you can start small without rebuilding later.

Open source

Build with individual components

Install only what you need, customize it with CSS variables, and use it in any frontend stack.

Explore components
LoomiUI Pro

Start from complete product foundations

Add application templates, production theme presets, design resources, and private tooling.

Explore LoomiUI Pro

Install LoomiUI and ship your first component.

Choose your package manager, add the library, and follow the installation guide for your stack.

Read the installation guide
npm install @loomidev/components lit