⛵️ Ship UI - New Angular UI lib

#angular #ui #webdev #typescript

Angular is getting a new open source MIT licensed UI library MortenPx as the designer and SimonBitwise me as the developer.

What are ⛵️ Ship UI - it's currently a ~22.14KB gzipped in css, zoneless compatible, signal based, runtime dependency free (besides angular), screen reader tested, angular ui library.

It feels that the way we built applications are incohesive and clunky while also feel that many of the UI libraries out there limit the design to much while also shipping way to much code. So about 18 months ago we sat out to solve that.

These are the requirements we put out for our selves.

Should have matching styles in Figma, UI Library and website builders ex (Framer, webflow etc.)
Have easy to update color palettes
Have multiple designs per component
The style of a component should only be represented by classes this also makes it easier in the future to make for multiple frameworks
Every component has css variables at the root of the component so its easy to locally override
Zoneless compatible
Component API should be simple to read, understand and reuse
As dependency free as possible
CSS first approach, which means the problems we can solve with css we solve with css then we fall over to js if it can't be solved with css

So as you can see we had my requirements and even though we have 30 years of professional experience between us we didn't know if it was possible.

So we knew it would require extensive iterations to get every little part right which have resulted in major rewrites multiple times so far, this is also why we havn't built more than the components you find in the docs.

But to make sure the API's we created where thought through we built out apps to use the components currently we have a taskboard, todo app, calendar and then it's also used in production to build duplicati.com both their console and client desktop application.

I dont wanna go into the API's right here but you can find how to use the library on docs.shipui.com

It's in pre release beta and the reason for that are that the API can change on soome of the components but we dont expect to drastically changing apis from now on

Features

So what features does it have, while having a wide varirty of base components like chips and buttons

We have built in a radix like color palette which currently are i HSL that will become OKLCH because of its more vibrant colors and the consistency based on lighting. This will also result in a theme editor where you can edit color palettes, border-radius, sizing, borders etc.

We made it so buttons, chips, form fields all comes in small variant

Buttons, chips, event cards, checkboxes and alerts all utilize the same coloring class which mean they all share the same styling but in their own shape, which also make it easy to add more variants of those widely used components.

Buttons, form fields and other actionable components have a click active state so you get feedback when clicking them.

All components have been tested on screen readers.

It's small ~115kb before minification and gzip

It's almost dependency free currently only depend on 4 packages for our icon font subsetting cli

We ship a font subsetting cli for icons so that you only have the icons you use in your icon font. We currently only support https://phosphoricons.com/ because we utilize ligatures for our icons <sh-icon>home</sh-icon> or for bold icons <sh-icon>home-bold</sh-icon> and yes you can mix icon styles. The only other font to support that are material icons so something we could add in the future. But we're more keen on also supporting svg/class based icons but they have their drawbacks like class based ship a lot of css for no reason and svg based you have to import them but we might make a svg sprite or similar which also have some drawbacks let me know if you have a good idea for that.

We have built in support for searching in our menus and selects so you dont have to and even with a wildcard search algorithm so if you search hello it actually checks *hello*

We utilize the modern Popover API so that when you mix dialogs with tooltips, dropdowns or the likes you dont have to fight the z-index war you just add them and use them

We're using a CSS first approach so your dropdown position are using anchor position which are not widely supported yet which are why we're providing a built in polyfill which ofc only are added if you use the component.

And much much more.