<h1 id="ui-components-catalog">UI components catalog<a aria-hidden="true" class="anchor-heading icon-link" href="#ui-components-catalog"></a></h1>
<ul>
<li>
<a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">text-input (Private)</a>
<ul>
<li><a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">search input (Private)</a> (<a href="/notes/dqs1xi7wx1q8xb0urwpzo2l">PNL</a>, <a href="/notes/3ejaxv4xm6o2psn0du528yw">netpin</a>)</li>
<li><a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">auto-resize text-area (Private)</a> (<a href="/notes/3ejaxv4xm6o2psn0du528yw">netpin</a>)</li>
<li><a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">text editor (Private)</a> (<a href="/notes/96uafepnjg67x3urkpe7hbs">CDPRP</a>)</li>
</ul>
</li>
<li>
<a href="/notes/g7lqlg6nczxgvs9113kt325">button</a> (<a href="/notes/dqs1xi7wx1q8xb0urwpzo2l">PNL</a>, <a href="/notes/3ejaxv4xm6o2psn0du528yw">netpin</a>)
</li>
<li>
<a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">checkbox (Private)</a> (<a href="/notes/3ejaxv4xm6o2psn0du528yw">netpin</a>)
</li>
<li>
<a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">dropdown (Private)</a> (<a href="/notes/dqs1xi7wx1q8xb0urwpzo2l">PNL</a>, <a href="/notes/3ejaxv4xm6o2psn0du528yw">netpin</a>)
</li>
<li>
<a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">card (Private)</a> (<a href="/notes/dqs1xi7wx1q8xb0urwpzo2l">PNL</a>, <a href="/notes/3ejaxv4xm6o2psn0du528yw">netpin</a>)
</li>
<li>
<a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">modal (Private)</a>
</li>
<li>
<a href="/notes/8b9ozqs2zd8ygyel3db5z4y">radix-UI</a>
<ul>
<li>dialog</li>
<li>accordion</li>
<li>collapsible</li>
<li>context menu</li>
<li>dropdown menu</li>
<li>hover card</li>
<li>menubar</li>
<li>navigation menu</li>
<li>popover</li>
<li>progress</li>
<li>scrollarea</li>
<li>slider</li>
<li>tabs</li>
<li>toast</li>
<li>toolbar</li>
</ul>
</li>
<li>
how is a context menu different from a dropdown menu?
<ul>
<li>just right-click vs left-click?</li>
</ul>
</li>
<li>
Disclosure
<ul>
<li>accordion</li>
<li>tabs</li>
</ul>
</li>
<li>
Feedback
<ul>
<li>alert</li>
<li>toast</li>
<li>progress</li>
<li>skeleton</li>
<li>spinner</li>
</ul>
</li>
<li>
Overlay
<ul>
<li>alert dialog</li>
<li>drawer</li>
<li>menu</li>
<li>modal</li>
<li>popover</li>
<li>tooltip</li>
</ul>
</li>
<li>
Media and icons
</li>
<li>
Data display
</li>
<li>
Navigation
</li>
<li>
Form
</li>
</ul>
Misc.: <a href="/notes/myi5w5hqehiuvd65iyisdu1">Interfaces</a>
<hr>
Backlinks
<ul>
<li><a href="/notes/zpy1cmoozsq31mnj0k5eqhu">catalogs</a></li>
</ul>

UI components catalog

Dendron


You've stumbled on [Caleb's](https://bycaleb.wasegun.com/) public notebook. You can conceive of this as a sketchbook too—i.e., rough, incomplete, and sometimes sparse. Hence, you might not get the full-gist of any one random page in the notebook. It is meant to help me elaborate/consolidate on my work & thoughts as a software engineer. This is not quite a [digital garden](https://maggieappleton.com/garden-history), and also unlike [Andy's working notes](https://notes.andymatuschak.org/About_these_notes).

I built this (experimentally & publicly) with [Dendron](https://www.dendron.so/), specifically, to understand if & how "quick, linked, and atomic" note-taking can help realize, remember, & learn (how to make better) design decisions when working on quick (or slow) software engineering projects. Of course, it does help—that makes this is a demonstration of exactly how it helps.

Check out my growing list of [[projects]]!

