Every building block in the 0n design system.
One library. 39 live building blocks across 7 categories. Every product surface in the 0n ecosystem is composed from this same set.
Core Blocks · Curated
The 39 live primitives every 0n surface uses
Triggers
Things people press, tap, or flip to make something happen.
Tap
A simple call to action. Used wherever someone needs to commit, confirm, or move forward.
Flip Tile
A two-state square that someone presses to mark a single option active or inactive.
Pick Strip
A row of two-state tiles where someone picks one or several options at once.
Inputs
How people give us information — typing, picking, sliding, scheduling.
Type Field
A single line for typed information — names, emails, search queries.
Long Note
A multi-line area for paragraphs, comments, and longer thoughts.
Caption Tag
A short label that names what an input is for and links it to assistive tech.
Check Square
A small square for marking single items as included or excluded.
One Choice
A small group where exactly one option is active at a time.
On-Off
A sliding bar for turning a single setting on or off — common in preferences and settings.
Drop Pick
A compact menu that opens to reveal options to choose from.
Slide Knob
A draggable handle on a track for picking a value in a range.
Code Slots
A row of digit boxes for entering verification codes and one-time passwords.
Day Picker
A calendar grid for selecting a date or a date range.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Containers
How information is grouped, framed, and organized on a page.
Card Tile
A bordered surface that groups a title, body, and optional action together.
Daily Digest
3 new updates this morning
Line Break
A thin line that visually separates two groups of content.
Section above
Section below
Frame Lock
A box that keeps its width-to-height proportions — used for video thumbnails and product images.
Scroll Box
A bounded region that scrolls its contents when they overflow.
Overlays
Surfaces that float above the page to surface information without leaving where you are.
Modal Box
A focused window that opens over the page for tasks that need full attention.
Confirm Modal
A small window that double-checks before something destructive or irreversible happens.
Bottom Pull
A panel that slides up from the bottom — natural on phones and small screens.
Side Slider
A panel that slides in from any edge of the screen — great for filters and inspectors.
Pop Bubble
A small floating panel anchored to whatever you press to open it.
Quick Tip
A tiny floating label that appears on hover or focus to explain an icon or button.
Hover Preview
A larger floating card with rich content that opens when you hover an item.
Right-Click Menu
A menu that appears wherever someone right-clicks — used for in-place actions.
Dropdown List
A list of choices that opens beneath a button, often with section headers.
Spotlight
A keyboard-driven search palette that lets people jump anywhere in the app instantly.
Feedback
How the system tells you what just happened, what is loading, or what is wrong.
Alert Banner
A boxed message that calls attention to something important on the current page.
Heads up
Status Chip
A small pill with a label or count — used for tags, statuses, and badges.
Loading Shimmer
A gentle animated placeholder used while the real content is on its way.
Toast Pop
A small message that appears in a corner to confirm an action and disappears on its own.
Display
How structured information — people, rows, cycles — gets shown beautifully.
Profile Icon
A circular space for a person’s photo, with a clean fallback when there isn’t one.
Data Table
A grid of rows and columns for showing structured records side by side.
| Plan | Seats | Monthly |
|---|---|---|
| Supporter | 1 | $8 |
| Builder | 5 | $80 |
| Enterprise | Unlimited | Custom |
Slide Cycle
A horizontal track that pages through cards, photos, or quotes one at a time.
Single Fold
A single section that quietly shows or hides its content with a press.
Multi Fold
A stack of foldable sections — used for FAQs, settings, and grouped detail pages.
Free Library · Live · 1,398 blocks
Every free block in the wider design ecosystem.
Live-pulled from the open community registry. Free, MIT-friendly building blocks only — categorized for fast browsing. Each card opens the live preview and includes the install command for direct adoption.