8 ms·
I launched Quiet UI this week: https://quietui.org/ https://quietui.org/ It prioritizes accessibility, longevity, performance, and simplicity. With the autol
by claviska 1y ago
I launched Quiet UI this week:
https://quietui.org/ https://quietui.org/
It prioritizes accessibility, longevity, performance, and simplicity.
With the autoloader, one script tag loads components dynamically without downloading the entire library. (npm also available.)
Theming uses color-mix() and OKLAB to create uniform color palettes from a single CSS property. Adaptive palettes are used for dark mode.
All form controls are form-associated via ElementInternals and work with native validation APIs (required, pattern, etc.).
Dialogs, popovers, tooltips, etc. use Popover API for top-layer access without having to portal or hoist.
Some of the more fun components include: Joystick, Stamp, Mesh Gradient, Flip Card, Random Content, Intersection Observer, Typewriter, Lorem Ipsum, Slide Activator
The library is free for personal, educational, non-profit use. Commercial use requires a license.
- sccomps 1y agoAwesome components library. Well done! I might definitely try it in one of my next projects.
- hsbauauvhabzb 1y agoFYI the browse components button clips text from the next section on ios From the text ‘What's in the box?’ Only the W is visible
- claviska 1y agoThanks! I’ll look into this.
- ferd 1y agoNice. Great work. Bookmarked
- threaaaaaat 1y agoGreat work!, love the simple aesthetic
- kmoser 1y agoYour docs are great! How did you create them? Did you use external tools to generate them?
- claviska 1y agoThank you! For the components, I use the Custom Elements Manifest Analyzer to get data from JSDoc comments and TypeScript. This populates properties, events, methods, slots, etc. All the examples and other pages are hand-made. Docs are generated with 11ty.
- rancar2 1y agoI especially liked the browser frame page. It’s so beautifully crafted. I would move the inception example onto the homepage and up on the examples as it is a good example of love put into the whole project and its execution. https://quietui.org/docs/components/browser-frame#embedding-content https://quietui.org/docs/components/browser-frame#embedding-...
- seism 1y agoThe "using with AI" support is really interesting, should help bootstrap some serious vibe coding.
- erezsh 1y agoLooks really nice!
- andoando 1y agoVery nice, will definitely be using this in the future.