Trending Society

Segmented control | UI components | Trending Society

More from @litt, 93 components

All @litt

Accordion component
@litt
Sections that open in place, split by hairlines: 56px triggers in headings with a chevron that turns half a turn, one section open at a time or several. The height snaps, the content fades in and drops a little, and the rows below move by transform, so the page never jumps.
3 registry deps · 2 packages
Action bar component
@litt
A glass bar that floats at the bottom of the view while rows or cards are selected: the count in words, the actions as small buttons and Clear. A toolbar with one Tab stop and the arrow keys inside; Esc clears.
3 registry deps · 1 package
Agent indicator component
@litt
What an agent is doing, in hardware: a seven-segment chase for thinking, a tuner for searching, stereo meters for reading, a dot matrix for reasoning, step lights for running and tape reels for writing, each moving only while tokens arrive. A Device part.
2 registry deps
App shell component
@litt
The frame around an app's pages: a 240px sidebar that runs the full height of the page with its links kept in view, and a main area. On a phone the sidebar goes, a glass top bar holds a menu button, and the nav opens in the bottom sheet.
6 registry deps · 1 package
Avatar component
@litt
A round mark for a person, a client or a company, in three sizes: a photo, or initials on the tint of one of the five data hues, picked from the name so the same name always gets the same color. A group overlaps them with a ring in the surface they sit on, and counts the rest in a +N pill.
1 registry dep
Bar list component
@litt
A ranked list where each row carries a thin bar for its share: top pages, most-used shortcuts, busiest repos. An optional lead, a label, a 4px rail, a mono value and a change in words. The bars line up across rows, and under 28rem the bar moves under the label.
2 registry deps · 1 package
Breadcrumb component
@litt
Where a page sits, with a slash between the levels and the current page in the foreground. Past four levels the middle folds into a round ghost button that opens the Menu, and phones show the last two levels. No motion of its own.
5 registry deps
Breakdown component
@litt
One whole split into its parts: a thin split rail with a segment per part in the data hues, then a row per part with its own 4px rail, a label and a mono reading, or a small legend for a tile. Storage by file type, credits by feature.
1 registry dep
Button component
@litt
Roomy and slightly rounded, with the label at the title weight, in primary, secondary and ghost, on the shared control scale. Hover and press are instant and never move the box.
2 registry deps
Callout component
@litt
An inline note in the page flow: a tip, a heads-up or a result to act on. A raised surface with a 16px icon, a title, a line of detail, and an optional action and close button. Only the icon takes the status color, and a hidden word before the title says the same thing, so there is never a rail, a tinted fill or a colored border. It measures its own width and drops the action below the text under 28rem.
3 registry deps
Card component
@litt
A raised surface for one object that links somewhere. A linked card is one real link stretched over the whole card, and hover moves the fill one step, with no lift, growth or scale.
1 registry dep
Card picker component
@litt
One choice shown as cards: tiles of a picture over a word in one tray, or cards with a title, a line and a detail such as a price, in a row when they fit and stacked when they do not. Native radios; the picked card is the raised block, gliding to the pick.
3 registry deps · 1 package

Segmented control

Install

Live preview

Registry dependencies2

Packages1

Segmented control

Install

Live preview

Registry dependencies2

Packages1

Source

More from @litt, 93 components

The Signal

Install

Live preview

Registry dependencies2

Packages1

Install

Live preview

Registry dependencies2

Packages1

Source

More from @litt93, 93 components

More from @litt, 93 components