Svelte 5 · Tailwind 4 · bits-ui
vitrea ·Latin, adj. “made of glass”, from vitrum, glass.
Vitrea is the component system behind Pujarr: 57 components where the glass is a real displacement map, with refraction, chromatic aberration and specular rims.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 1 | 2 | 3 | 4 | 5 |
9 auctions close on Mon 9 Nov · Example data
Drag it, flick it, or use the wheel.
Days next to each other fuse into one piece of glass.
Where winning bids land, in % of the valuation. Hover a bar. Example data.
Text input.
Input with leading and trailing addons.
One-time code input with separate slots.
Multi-line text input.
Label, control, description and error laid out together.
Accessible label for a control.
Binary choice.
One choice out of a set.
On/off toggle.
Pick a value or a range. The knob turns into a glass lens that bends the track while you drag it.
The map's price filter: drag across the bars to pick a range, or drag an edge to move it. The count updates as you drag.
Pick from a list in a popover.
The platform select, styled.
Two-state button.
A set of toggles, single or multiple.
Single-choice selector whose indicator is a real refracting lens that slides between options.
Dense multi-select pill with a live count of what each option would return.
Filled, neutral and ghost glass buttons with a specular rim and spring press.
Buttons joined into one control.
Date picker grid.
Pick a start and end date.
Modal window over a blurred backdrop.
Modal that asks for confirmation.
Panel that slides in from an edge.
Bottom sheet you can drag to dismiss.
Floating content anchored to a trigger.
Preview content on hover.
Short hint on hover or focus.
Menu of actions from a button.
Menu on right click.
Desktop-style menu bar.
Searchable command palette.
Stacked, swipeable notifications.
Switch between panels.
Where you are in a hierarchy.
Page numbers slide under a fixed glass lens, like a picker. The width never changes, so nothing jumps.
Site navigation with rich submenus.
Grouped content with header and footer.
A row with media, content and actions.
Stacked sections that expand one at a time.
Show and hide a block.
Sortable rows that glide into place, with a sliding glass highlight and selection.
Swipeable slides.
Panels split by a draggable handle.
Scroll container with themed scrollbars.
Keep content at a fixed ratio.
Visual divider.
Empty state with icon, text and action.
Callout for important information.
Small status label.
A number that rolls when it changes: only the digits that change move, up or down. For counts, prices and percentages.
Completion bar.
Indeterminate loading indicator.
Placeholder while content loads.
User image with fallback.
Keyboard key.
A hand-made histogram that grows and morphs on a spring, plus themed LayerChart charts.