banner
quietui.org
Quiet UI
@quietui.org
98 followers 1 following 18 posts
A UI library for the Web focusing on accessibility, longevity, performance, and simplicity. 🐭 quietui.org
Posts Media Videos Starter Packs
quietui.org
Quiet UI @quietui.org · 3d
Don't spoil the surprise with <quiet-spoiler>
screenshot of the <quiet-spoiler> component from the docs
4
quietui.org
Quiet UI @quietui.org · 6d
Let <quiet-typewriter> do the typing for you.
1
quietui.org
Quiet UI @quietui.org · 7d
quietui.org/docs/compone...
Random Content · Quiet UI
Randomly displays one or more elements from a list.
quietui.org
1
quietui.org
Quiet UI @quietui.org · 7d
Show random content without writing any JavaScript.
<quiet-random-content> <div class="box">A</div> <div class="box">B</div> <div class="box">C</div> <div class="box">D</div> </quiet-random-content>
1 2
quietui.org
Quiet UI @quietui.org · 8d
🕶️
a man wearing sunglasses and holding a sword says " use it "
Alt: a man wearing sunglasses and holding a sword says " use it "
media.tenor.com
1
quietui.org
Quiet UI @quietui.org · 8d
Quiet Restyle is an opinionated CSS reset that makes browsers look like they're not from 1992. You can think of it as a smarter, prettier user agent stylesheet.

quietui.org/docs/restyle
Quiet Restyle · Quiet UI
An opinionated CSS reset you can use with or without Quiet's components.
quietui.org
2 6
quietui.org
Quiet UI @quietui.org · 9d
Learn more: quietui.org/docs/theming
Theming · Quiet UI
Theme concepts, color palettes, and design tokens.
quietui.org
quietui.org
Quiet UI @quietui.org · 9d
Use light and dark mode on the same page by applying `class="quiet-light"` and `class="quiet-dark".
Screenshot of a light and dark mode card with text and a button.
1 1 1
quietui.org
Quiet UI @quietui.org · 9d
As easier alternative is to set, e.g. --quiet-primary-seed to any 500-level color but the generated palette won't match perfectly. The CodePen uses the exact palette (without the 150 and 850 steps).
1 1
quietui.org
Quiet UI @quietui.org · 9d
Since Flexoki has full palettes, you can override the existing palettes like this.

codepen.io/claviska/pen...
Quiet UI: using the Flexoki color palettes
...
codepen.io
1 1
quietui.org
Quiet UI @quietui.org · 10d
Toggle Icons are checkboxes disguised as icons, an accessible way to add visual flair when a standard checkbox just wont do.

quietui.org/docs/compone...
Three toggle icons screenshotted from the dos.
1 1
quietui.org
Quiet UI @quietui.org · 11d
Eat your heart out, iOS. Works with touch, mouse, and keyboard with screen reader support.

quietui.org/docs/compone...
1 9
quietui.org
Quiet UI @quietui.org · 12d
Here’s a component that shows random content from a collection. Great for testimonials, tips, quotes, and more.

quietui.org/docs/compone...
<quiet-random-content> <div class="box">A</div> <div class="box">B</div> <div class="box">C</div> <div class="box">D</div> </quiet-random-content>
1 3
Reposted by Quiet UI
cory.laviska.com
Cory LaViska @cory.laviska.com · 12d
I recently released a side project called Quiet UI. It's, perhaps unexpectedly, a component library. This begs the question:

“another UI library? But why?”

www.abeautifulsite.net/posts/quietu...
Quiet UI - My Creative Outlet
A side project born from a passion for UI design and bleeding-edge APIs.
www.abeautifulsite.net
4 19
quietui.org
Quiet UI @quietui.org · 13d
Quiet uses color-mix() and OKLAB to generate perceptually uniform color palettes from a single CSS custom property.

The built-in presets are each just one line of CSS. Check out the theming docs to learn more.

quietui.org/docs/theming
Screenshot of 18 color presets /* Custom orange theme */ :root { --quiet-primary-seed: #e98d61; }
1
quietui.org
Quiet UI @quietui.org · 13d
Joystick was a lot of fun to build and maybe didn't belong in the library but somebody already found it useful! 😊

quietui.org/docs/compone...
Joystick · Quiet UI
A directional joystick that can be controlled via touch or mouse.
quietui.org
2 13
quietui.org
Quiet UI @quietui.org · 14d
Regular buttons, icon buttons, outline buttons, pill buttons, image buttons, toggle buttons, loading buttons, link buttons, text buttons…they’re all tucked neatly into one component.



quietui.org/docs/compone...
Button · Quiet UI
Allows users to navigate, submit forms, and perform other actions.
quietui.org
3
quietui.org
Quiet UI @quietui.org · 14d
Quiet Restyle is an opinionated CSS reset you can use with or without the components to kick off a new app.

quietui.org/docs/restyle
Quiet Restyle · Quiet UI
An opinionated CSS reset you can use with or without Quiet's components.
quietui.org
6
quietui.org
Quiet UI @quietui.org · 15d
An unlikely component has quickly turned into one of my favorites:



quietui.org/docs/compone...
Mesh Gradient · Quiet UI
Generates beautiful mesh gradients with customizable colors and complexity.
quietui.org
1 8