Lode

Components

Every preview is the real component. Open one to try it with your keyboard, read how it behaves, and install it.

A few components worth opening first.

  • Pro

    Type to filter, Enter to run

  • Pro

    Icons that grow under your pointer

  • Pro

    Everything a table needs

  • Push past a limit and it pushes back

  • Pro

    Cards that become dialogs

  • Pro

    Pick a range, the numbers follow

Foundations

The controls every product needs.

Actions7

Buttons and controls that do something, with feedback built in.

  • Press it and it gives a little

  • Save, then see it saved

  • Pro

    A heart that bursts

  • Pro

    No more accidental deletes

  • Pro

    Slide to pay, slide to ship

  • ProNew

    One button, many actions

  • ProNew

    Press and ripple

Inputs20

Fields, pickers and toggles that feel good to use.

  • The pill follows your pick

  • Push past a limit and it pushes back

  • Opens from where you clicked

  • Toggle it, the thumb stretches

  • Drag it, the value rides along

  • The tick draws itself

  • Paste the code, it fills in

  • Icons, clear, reveal, errors

  • Grows as you type

  • List or choice cards

  • Enter, comma or paste

  • Search, then pick one or many

  • Stars, halves included

  • Pro

    Hue, shade, hex and eyedropper

  • Pro

    Two thumbs and a histogram

  • ProNew

    One or many, with a sliding pill

  • ProNew

    @ someone

  • ProNew

    Turn it up

  • ProNew

    Click to edit, Enter to save

  • ProNew

    Day to night

Forms4

Validation-ready fields for sign-up, checkout and settings.

  • Pro

    Drop, validate, upload

  • ProNew

    Meter and live rules

  • ProNew

    Country picker, formatted as you type

  • ProNew

    Sign with ink that feels real

Date & Time5

Calendars, ranges, countdowns and time pickers.

  • Pro

    Pick a range, the numbers follow

  • Pro

    A countdown that flips

  • Pro

    iOS-style scroll wheels

  • ProNew

    Pick a day, jump a month

  • ProNew

    Book a slot, confirm in place

Navigation & layout

Move around, arrange and layer.

Navigation13

Menus, tabs, breadcrumbs and app chrome.

  • Pro

    Type to filter, Enter to run

  • The line follows your tab

  • Open one, the rest make room

  • Long paths, collapsed

  • Pages with a gliding marker

  • Progress through a flow

  • Pro

    Icons that grow under your pointer

  • Pro

    How far you've read

  • Pro

    Icons that reveal their names

  • ProNew

    Panels that slide and morph

  • ProNew

    Collapses to icons

  • ProNew

    A mobile tab bar

  • ProNew

    Where you are on the page

Layout3

Resize, reorder and stack content.

  • Pro

    Drag or arrow to reorder

  • Pro

    Drag to make room

  • ProNew

    Cards that stack as you scroll

Overlays9

Dialogs, drawers, popovers and tours.

  • Open it, arrow through it

  • Hover, wait a beat, there it is

  • Modal or sheet, focus stays inside

  • Anchored panels

  • Pro

    Cards that become dialogs

  • Pro

    Right-click, long-press, Shift+F10

  • Pro

    Rich previews on hover

  • Pro

    A sheet you pull down

  • ProNew

    Show people around

Data & feedback

Show numbers, status and progress.

Data Display9

Numbers, people, lists and tables.

  • Numbers spring, they don't jump

  • Every digit rolls on its own

  • A crowd that makes room on hover

  • Pro

    Hover the portrait, the story rises

  • Tones and live status dots

  • A number with context

  • What happened, in order

  • Pro

    Everything a table needs

  • Pro

    Folders, files and full keyboard

Charts15

Animated charts that explain themselves.

  • Pro

    Arcs morph to the new period

  • Pro

    Switch ranges and the line reshapes

  • A trend in 96 pixels

  • Pro

    Bars grow in, then morph

  • Pro

    Candles, volume and a crosshair

  • Pro

    Cohorts at a glance

  • Pro

    Above and below the line

  • Many lines, one tooltip

  • Pro

    Where people drop off

  • Capacity at a glance

  • Pro

    A year of activity at a glance

  • ProNew

    Strengths at a glance

  • ProNew

    Two measures, every point

  • ProNew

    Share of the whole

  • ProNew

    Close your rings

Feedback11

Status, progress, alerts and notifications.

  • Bars, rings and meters that ease

  • Stack, fan out, swipe away

  • Inline or full-width banners

  • Placeholders that shimmer

  • Empty, error, offline, rate-limited

  • Pro

    Live feeds that make room

  • Pro

    Live activity in a pill

  • Pro

    Celebrate the wins

  • ProNew

    Six ways to wait

  • ProNew

    A bell full of updates

  • ProNew

    Launches above the header

Motion & media

Delight, atmosphere and rich media.

Motion9

Interaction effects that add depth and delight.

  • Light follows the pointer

  • Leans toward the cursor

  • Pro

    Light around the edge

  • Enter on scroll

  • Pro

    3D tilt and glare

  • Pro

    Endless logos and testimonials

  • Pro

    Two faces, one 3D flip

  • Pro

    Integrations in orbit

  • ProNew

    Data in flight

Text Effects6

Headlines that type, rotate, reveal and shimmer.

  • Words rise out of a blur

  • Decodes into place

  • For thinking states

  • Pro

    Types, deletes, repeats

  • Pro

    One word, many meanings

  • ProNew

    Color that flows

Backgrounds4

Atmosphere for heroes and sections.

  • Pro

    A calm drifting glow

  • ProNew

    A living constellation

  • ProNew

    Shooting stars

  • ProNew

    A grid that glows

Media8

Players, galleries and image tools.

  • Pro

    Hover the folder, the files fan out

  • Pro

    Swipe left, swipe right

  • Pro

    Before and after, side by side

  • Pro

    Swipe, snap and autoplay

  • ProNew

    Controls that get out of the way

  • ProNew

    A waveform you can click

  • ProNew

    A magnifying glass

  • ProNew

    Thumbnails that grow

Domains

Specialised pieces for real products.

AI6

Chat, reasoning, sources and voice.

  • Pro

    The chat composer

  • Pro

    Show the model's work

  • Sources for answers

  • ProNew

    Someone is typing…

  • ProNew

    Streamed replies with actions

  • ProNew

    A voice you can see

Developer7

Code, logs, terminals and config.

  • Tabs, lines, highlights, copy

  • Commands that type themselves

  • Fold any JSON

  • Pro

    Unified or split

  • Pro

    Tail, filter, search

  • Pro

    Status-page bars

  • Pro

    Secrets, scoped and masked

Commerce4

Products, cards, coupons and payments.

  • Pro

    Swatches, wishlist, add to cart

  • ProNew

    A card that flips for the CVC

  • ProNew

    Promo codes with a ticket

  • ProNew

    A card with a holographic sheen