twentythree-ui

23/ui

A forward-thinking library of web components.

• Works with all frameworks 🧩
• Works with CDNs 🚛
• Fully customizable with CSS 🎨
• Includes an official dark theme 🌛
• Built with accessibility in mind ♿️

---

What are you using to build 23/ui?

Components are built with Stencil, a compiler that generates standards-based web components. The source code is a combination of TypeScript + JSX (TSX). Stylesheets are written in SCSS.

The build is done through a combination of Stencil's CLI and a handful of custom scripts.

Developing

Once you've cloned the repo, run the following command.

npm run start

This will spin up the Shoelace dev server. Note that the dev server requires ports 4000, 4001, and 4002 to be available.

After the initial build, a browser will open at http://localhost:4000.

Hot module reloading (HMR) is enabled for components, so changes will instantly reflect in the browser as you work. The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs. Unfortunately, changes to documentation pages will trigger a page refresh (no HMR).

Building

To generate a production build, run the following command.

npm run build