Lightnews — Scholar-powered news

Quiet UI @quietui.org · 2d

<quiet-progress appearance="🥧">

Screenshot of the progress component rendered with a pie chart appearance.

1 1

Quiet UI @quietui.org · 3d

Oh and commercial licenses are only $99 for a limited time. 🤫

Quiet UI @quietui.org · 3d

Quiet UI v1.2.0 has been released with some bug fixes and a handful of new features.

quietui.org/docs/develop...

Changelog · Quiet UI

Every release ships with a changelog entry that shows what's new.

quietui.org

1 2

Quiet UI @quietui.org · 3d

Quiet UI v1.2.0 has been released with some bug fixes and a handful of new features.

quietui.org/docs/develop...

Changelog · Quiet UI

Every release ships with a changelog entry that shows what's new.

quietui.org

3

Quiet UI @quietui.org · 9d

Don't spoil the surprise with <quiet-spoiler>

screenshot of the <quiet-spoiler> component from the docs

4

Quiet UI @quietui.org · 12d

Let <quiet-typewriter> do the typing for you.

1

Quiet UI @quietui.org · 13d

quietui.org/docs/compone...

Random Content · Quiet UI

Randomly displays one or more elements from a list.

quietui.org

1

Quiet UI @quietui.org · 13d

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

Quiet UI @quietui.org · 14d

🕶️

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

Quiet UI @quietui.org · 15d

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

Quiet UI @quietui.org · 15d

Learn more: quietui.org/docs/theming

Theming · Quiet UI

Theme concepts, color palettes, and design tokens.

quietui.org

Quiet UI @quietui.org · 15d

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

Quiet UI @quietui.org · 15d

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

Quiet UI @quietui.org · 15d

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

Quiet UI @quietui.org · 16d

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

Quiet UI @quietui.org · 17d

Eat your heart out, iOS. Works with touch, mouse, and keyboard with screen reader support.

quietui.org/docs/compone...

1 9

Quiet UI @quietui.org · 19d

Here’s a component that shows random content from a collection. Great for testimonials, tips, quotes, and more.

quietui.org/docs/compone...

1 3

Reposted by Quiet UI

Cory LaViska @cory.laviska.com · 19d

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

Quiet UI @quietui.org · 20d

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

/* Custom orange theme */
:root {
--quiet-primary-seed: #e98d61;
}

1

Quiet UI @quietui.org · 20d

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

Quiet UI @quietui.org · 20d

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

Quiet UI @quietui.org · 21d

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

Quiet UI @quietui.org · 21d

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