@silicon-ui

Silicon UI design tokens (color, surface, radius, shadow, accent, focus, light and dark themes), plus the shared motion presets. Install once per app.

The shared motion presets (durations, easings, springs, staggers) Silicon UI components import. Installed automatically with any item that uses them.

A clear, responsive action with quiet secondary states.

A link that looks exactly like a button, for actions that go somewhere.

A compact button for frequent toolbar actions.

A primary action with a menu of nearby alternatives.

Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached me…

Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.

Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.

A focused list of actions anchored to a trigger.

Secondary actions kept close to the selected object.

Copy a value with immediate confirmation.

A temporary side surface for focused work.

Four smooth ways to move between light and dark appearance.

The next appearance crosses the page like an eclipse.

The next appearance opens from a slim center seam.

The next appearance rises into place.

A compact identity marker for people and accounts.

Show a team or set of contributors in a small space.

A single line field with clear labels and useful states.

A multiline field for notes, descriptions, and longer text.

A compact choice field with a keyboard friendly menu.

Search and select from a list without leaving the field.

A binary choice with a precise, legible state.

A tactile toggle for settings that take effect immediately.

Select several values while keeping the field readable.

Enter a bounded number with clear increment controls.

Capture sensitive text with a visible reveal control.

A recognizable search entry point with clear affordances.

Turn short text values into removable tags.

A generous target for dropping one or more files.

Choose one option from a visible set.

Switch between a small set of related views.

Browse dates in a clear, compact month view.

Choose a date without losing context.

Choose a time with sensible keyboard behavior.

Progressively reveal supporting information in place.

A focused surface for decisions that need attention.

A small anchored surface for contextual information.

Short supporting text for unfamiliar controls.

Switch between related content in the same context.

Give a dense card more room when requested.

Show where a page sits in a hierarchy.

A sidebar's list of destinations, with sections, the current page and locked rows that say why.

A persistent message that helps people recover or continue.

Brief confirmation for a completed background action.

Show how much of a known task is complete.

Reserve space while content is still loading.

A small label for status, category, or metadata.

A contained group of related content and actions.

A compact summary for a number that needs context.

A useful next step when there is nothing to show yet.

Navigate nested folders and structured content.

Move through a long collection with clear bounds.

Keep collection filters close and easy to reset.

Compare structured records with sortable columns.

Show a compact trend beside a value.

Show a value against a known range.

Give changing totals a clear sense of movement.

Present code with legible hierarchy and copy access.

Reveal a short piece of content with restrained motion.

Bring a section title in as it scrolls into view.

Morph a label into its next state, letter by letter.

Show ongoing work with a calm light across the words.

Confirm a destructive action by holding, not tapping.

Reveal row actions with a swipe, or from the same actions in a menu.

Pick a value or a range on a track that follows your finger.

A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.

Rename in place: the text becomes a field without moving.

An icon that morphs into a search field with results beneath it.

Filter by a few facets with chips that morph as you pick them.

Show how strong a new password is while it is typed.

A sheet that rests at a peek or full height and follows your finger.

Preview a person or link on hover or focus without leaving the page.

Trade space between panes by dragging the divider between them.

Stack short results at the edge until you reach for them.

Show what fills an allowance and how close it is to the limit.

Drag a divider across two images to see what changed.

Browse a row of slides by dragging, flicking, or arrowing through them.

Review a deck one card at a time, with a throw and an undo.

Compare one measure across days and scrub any bar for its value.

See a year of activity at a glance, one square per day.

Follow what happened, newest first, grouped by day.

Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.

Show where a person is in a multi-step flow and what is done.

Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.

A range picker that grows from its trigger into two months with presets and a stretching range highlight.

A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.

A select whose trigger grows into the list, with a gliding highlight and type-ahead.

A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.

A donut whose arcs morph between datasets, with the active value rolling into the center.

Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.

A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.

Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.

A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.

A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.

Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.

A launch countdown with rolling digits that morphs into a live state at zero.

A top banner that rotates messages, counts down, and collapses smoothly when dismissed.

A collapsible JSON tree with search, paging for long arrays, and copy value or path.

A phone field with a country picker, formatting as you type, and E.164 output.

A currency field with live grouping, stable width, rolling digits, and minor-unit output.

Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.

A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.

A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.

A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.

A monthly and yearly switch with a savings badge and prices that roll to the new amount.

A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.

Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.

Threaded comments with replies, reactions, mentions, inline edit, and resolve.

Text and numbers that spin into their new value on staggered slot machine reels.

An account creation flow with field validation, password strength, and a clear completion state.

A quiet, continuously moving row of brand marks with a pause control.

Compare meaningful differences between plans and billing periods.

A complete keyboard driven action surface with search, grouped results, and shortcuts.

A home for updates with read state, grouped information, and animated disclosure.

A complete file selection flow with constraints, progress, and error feedback.

A six digit verification flow with paste support and keyboard navigation.

Release notes you can filter, open in place, and scroll through month by month.

A sign in card that morphs from email to a six digit code to your account.

A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.

Four empty states in one illustration whose shapes morph between scenes as you switch tabs.

A passkey-first login card on a quiet ring backdrop that morphs through email and code.

A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.

A website footer with link columns and newsletter, a minimal layout, and a large fading Silicon mark.

Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and …

FAQs as an accordion, a topic rail, or a searchable list that highlights matches.

A validated contact form that morphs into a confirmation, support channels, and office cards with local times.

A blog index with a featured post, category filter, post cards, pagination and an in-place reader.

An us versus them table with a sticky header, a highlighted column, and a stacked phone view.

Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.

A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.

An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.