# Silicon UI

> Free, open source React components and blocks with calm, physical motion, by Team of Silicons. Plain source installed with the shadcn CLI: CSS modules on design tokens, Motion for animation, keyboard support and reduced motion.

Install: `npx shadcn@latest add @silicon-ui/<id>` (registry: https://ui.teamofsilicons.com/r/{name}.json). Tokens: `npx shadcn@latest add @silicon-ui/silicon-foundation`, then import `components/silicon-ui/foundation.css` once.

## Actions

- [Button](https://ui.teamofsilicons.com/button.md): A clear, responsive action with quiet secondary states.
- [Action button](https://ui.teamofsilicons.com/action-button.md): A compact button for frequent toolbar actions.
- [Split button](https://ui.teamofsilicons.com/split-button.md): A primary action with a menu of nearby alternatives.
- [Button group](https://ui.teamofsilicons.com/button-group.md): Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
- [Floating button group](https://ui.teamofsilicons.com/floating-button-group.md): 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.
- [Expanding button group](https://ui.teamofsilicons.com/expanding-button-group.md): 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.
- [Copy button](https://ui.teamofsilicons.com/copy-button.md): Copy a value with immediate confirmation.
- [Confirm morph](https://ui.teamofsilicons.com/confirm-morph.md): A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.
- [Hold to confirm](https://ui.teamofsilicons.com/hold-to-confirm.md): Confirm a destructive action by holding, not tapping.
- [Swipe actions](https://ui.teamofsilicons.com/swipe-actions.md): Reveal row actions with a swipe, or from the same actions in a menu.
- [Dropdown menu](https://ui.teamofsilicons.com/dropdown-menu.md): A focused list of actions anchored to a trigger.
- [Context menu](https://ui.teamofsilicons.com/context-menu.md): Secondary actions kept close to the selected object.
- [User menu](https://ui.teamofsilicons.com/user-menu.md): Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.
- [Theme switcher](https://ui.teamofsilicons.com/theme-switch.md): Four smooth ways to move between light and dark appearance.
- [Eclipse](https://ui.teamofsilicons.com/theme-switch-eclipse.md): The next appearance crosses the page like an eclipse.
- [Split](https://ui.teamofsilicons.com/theme-switch-split.md): The next appearance opens from a slim center seam.
- [Rise](https://ui.teamofsilicons.com/theme-switch-rise.md): The next appearance rises into place.

## Inputs

- [Input](https://ui.teamofsilicons.com/input.md): A single line field with clear labels and useful states.
- [Textarea](https://ui.teamofsilicons.com/textarea.md): A multiline field for notes, descriptions, and longer text.
- [Password field](https://ui.teamofsilicons.com/password-field.md): Capture sensitive text with a visible reveal control.
- [Password strength](https://ui.teamofsilicons.com/password-strength.md): Show how strong a new password is while it is typed.
- [Search field](https://ui.teamofsilicons.com/search-field.md): A recognizable search entry point with clear affordances.
- [Expanding search](https://ui.teamofsilicons.com/expanding-search.md): An icon that morphs into a search field with results beneath it.
- [Inline edit](https://ui.teamofsilicons.com/inline-edit.md): Rename in place: the text becomes a field without moving.
- [Number field](https://ui.teamofsilicons.com/number-field.md): Enter a bounded number with clear increment controls.
- [Money input](https://ui.teamofsilicons.com/money-input.md): A currency field with live grouping, stable width, rolling digits, and minor-unit output.
- [Phone input](https://ui.teamofsilicons.com/phone-input.md): A phone field with a country picker, formatting as you type, and E.164 output.
- [Tag input](https://ui.teamofsilicons.com/tag-input.md): Turn short text values into removable tags.
- [Mention input](https://ui.teamofsilicons.com/mention-input.md): A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.
- [Shortcut recorder](https://ui.teamofsilicons.com/shortcut-recorder.md): Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.
- [Select](https://ui.teamofsilicons.com/select.md): A compact choice field with a keyboard friendly menu.
- [Combobox](https://ui.teamofsilicons.com/combobox.md): Search and select from a list without leaving the field.
- [Multi-select](https://ui.teamofsilicons.com/multi-select.md): Select several values while keeping the field readable.
- [Morph select](https://ui.teamofsilicons.com/morph-select.md): A select whose trigger grows into the list, with a gliding highlight and type-ahead.
- [Chip group](https://ui.teamofsilicons.com/chip-group.md): Filter by a few facets with chips that morph as you pick them.
- [Radio cards](https://ui.teamofsilicons.com/radio-cards.md): Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
- [Billing toggle](https://ui.teamofsilicons.com/billing-toggle.md): A monthly and yearly switch with a savings badge and prices that roll to the new amount.
- [Checkbox](https://ui.teamofsilicons.com/checkbox.md): A binary choice with a precise, legible state.
- [Radio group](https://ui.teamofsilicons.com/radio-group.md): Choose one option from a visible set.
- [Switch](https://ui.teamofsilicons.com/switch.md): A tactile toggle for settings that take effect immediately.
- [Segmented control](https://ui.teamofsilicons.com/segmented-control.md): Switch between a small set of related views.
- [Slider](https://ui.teamofsilicons.com/slider.md): Pick a value or a range on a track that follows your finger.
- [Elastic slider](https://ui.teamofsilicons.com/elastic-slider.md): A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.
- [Calendar](https://ui.teamofsilicons.com/calendar.md): Browse dates in a clear, compact month view.
- [Date picker](https://ui.teamofsilicons.com/date-picker.md): Choose a date without losing context.
- [Date range picker](https://ui.teamofsilicons.com/date-range-picker.md): A range picker that grows from its trigger into two months with presets and a stretching range highlight.
- [Time picker](https://ui.teamofsilicons.com/time-picker.md): Choose a time with sensible keyboard behavior.
- [Color picker](https://ui.teamofsilicons.com/color-picker.md): A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.
- [Rich text editor](https://ui.teamofsilicons.com/rich-text-editor.md): A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.
- [Signature pad](https://ui.teamofsilicons.com/signature-pad.md): Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.
- [File dropzone](https://ui.teamofsilicons.com/file-dropzone.md): A generous target for dropping one or more files.

## Disclosure

- [Tabs](https://ui.teamofsilicons.com/tabs.md): Switch between related content in the same context.
- [Breadcrumb](https://ui.teamofsilicons.com/breadcrumb.md): Show where a page sits in a hierarchy.
- [Pagination](https://ui.teamofsilicons.com/pagination.md): Move through a long collection with clear bounds.
- [Scroll area](https://ui.teamofsilicons.com/scroll-area.md): A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.
- [Accordion](https://ui.teamofsilicons.com/accordion.md): Progressively reveal supporting information in place.
- [Expandable card](https://ui.teamofsilicons.com/expandable-card.md): Give a dense card more room when requested.
- [Resizable panels](https://ui.teamofsilicons.com/resizable-panels.md): Trade space between panes by dragging the divider between them.
- [Dialog](https://ui.teamofsilicons.com/dialog.md): A focused surface for decisions that need attention.
- [Drawer](https://ui.teamofsilicons.com/drawer.md): A temporary side surface for focused work.
- [Bottom sheet](https://ui.teamofsilicons.com/bottom-sheet.md): A sheet that rests at a peek or full height and follows your finger.
- [Popover](https://ui.teamofsilicons.com/popover.md): A small anchored surface for contextual information.
- [Hover card](https://ui.teamofsilicons.com/hover-card.md): Preview a person or link on hover or focus without leaving the page.
- [Tooltip](https://ui.teamofsilicons.com/tooltip.md): Short supporting text for unfamiliar controls.

## Feedback

- [Alert](https://ui.teamofsilicons.com/alert.md): A persistent message that helps people recover or continue.
- [Toast](https://ui.teamofsilicons.com/toast.md): Brief confirmation for a completed background action.
- [Toast stack](https://ui.teamofsilicons.com/toast-stack.md): Stack short results at the edge until you reach for them.
- [Announcement bar](https://ui.teamofsilicons.com/announcement-bar.md): A top banner that rotates messages, counts down, and collapses smoothly when dismissed.
- [Progress](https://ui.teamofsilicons.com/progress.md): Show how much of a known task is complete.
- [Skeleton](https://ui.teamofsilicons.com/skeleton.md): Reserve space while content is still loading.
- [Stepper](https://ui.teamofsilicons.com/stepper.md): Show where a person is in a multi-step flow and what is done.
- [Countdown](https://ui.teamofsilicons.com/countdown.md): A launch countdown with rolling digits that morphs into a live state at zero.
- [Usage meter](https://ui.teamofsilicons.com/usage-meter.md): Show what fills an allowance and how close it is to the limit.

## Data

- [Avatar](https://ui.teamofsilicons.com/avatar.md): A compact identity marker for people and accounts.
- [Avatar group](https://ui.teamofsilicons.com/avatar-group.md): Show a team or set of contributors in a small space.
- [Badge](https://ui.teamofsilicons.com/badge.md): A small label for status, category, or metadata.
- [Card](https://ui.teamofsilicons.com/card.md): A contained group of related content and actions.
- [Metric card](https://ui.teamofsilicons.com/metric-card.md): A compact summary for a number that needs context.
- [Empty state](https://ui.teamofsilicons.com/empty-state.md): A useful next step when there is nothing to show yet.
- [Line chart](https://ui.teamofsilicons.com/line-chart.md): A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.
- [Bar chart](https://ui.teamofsilicons.com/bar-chart.md): Compare one measure across days and scrub any bar for its value.
- [Donut chart](https://ui.teamofsilicons.com/donut-chart.md): A donut whose arcs morph between datasets, with the active value rolling into the center.
- [Streamgraph](https://ui.teamofsilicons.com/streamgraph.md): Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.
- [Brush chart](https://ui.teamofsilicons.com/brush-chart.md): A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.
- [Waffle chart](https://ui.teamofsilicons.com/waffle-chart.md): A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.
- [Slope chart](https://ui.teamofsilicons.com/slope-chart.md): 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.
- [Sparkline](https://ui.teamofsilicons.com/sparkline.md): Show a compact trend beside a value.
- [Gauge](https://ui.teamofsilicons.com/gauge.md): Show a value against a known range.
- [Activity heatmap](https://ui.teamofsilicons.com/activity-heatmap.md): See a year of activity at a glance, one square per day.
- [Animated counter](https://ui.teamofsilicons.com/animated-counter.md): Give changing totals a clear sense of movement.
- [Ridgeline](https://ui.teamofsilicons.com/ridgeline.md): Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.
- [Treemap](https://ui.teamofsilicons.com/treemap.md): A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.
- [Sortable data table](https://ui.teamofsilicons.com/sortable-data-table.md): Compare structured records with sortable columns.
- [Tree view](https://ui.teamofsilicons.com/tree-view.md): Navigate nested folders and structured content.
- [Filter toolbar](https://ui.teamofsilicons.com/filter-toolbar.md): Keep collection filters close and easy to reset.
- [Code block](https://ui.teamofsilicons.com/code-block.md): Present code with legible hierarchy and copy access.
- [JSON viewer](https://ui.teamofsilicons.com/json-viewer.md): A collapsible JSON tree with search, paging for long arrays, and copy value or path.
- [Timeline](https://ui.teamofsilicons.com/timeline.md): Follow what happened, newest first, grouped by day.
- [Comment thread](https://ui.teamofsilicons.com/comment-thread.md): Threaded comments with replies, reactions, mentions, inline edit, and resolve.
- [Chat thread](https://ui.teamofsilicons.com/chat-thread.md): A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
- [Image compare](https://ui.teamofsilicons.com/image-compare.md): Drag a divider across two images to see what changed.
- [Carousel](https://ui.teamofsilicons.com/carousel.md): Browse a row of slides by dragging, flicking, or arrowing through them.
- [Card stack](https://ui.teamofsilicons.com/card-stack.md): Review a deck one card at a time, with a throw and an undo.

## Text

- [Text reveal](https://ui.teamofsilicons.com/text-reveal.md): Reveal a short piece of content with restrained motion.
- [In-view title](https://ui.teamofsilicons.com/in-view-title.md): Bring a section title in as it scrolls into view.
- [Text morph](https://ui.teamofsilicons.com/text-morph.md): Morph a label into its next state, letter by letter.
- [Text shimmer](https://ui.teamofsilicons.com/text-shimmer.md): Show ongoing work with a calm light across the words.

## Special

- [Slot text](https://ui.teamofsilicons.com/slot-text.md): Text and numbers that spin into their new value on staggered slot machine reels.

## Blocks: App shell

- [Page header](https://ui.teamofsilicons.com/page-header.md): A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.
- [Command palette](https://ui.teamofsilicons.com/command-palette.md): A complete keyboard driven action surface with search, grouped results, and shortcuts.
- [Notification center](https://ui.teamofsilicons.com/notification-center.md): A home for updates with read state, grouped information, and animated disclosure.
- [Empty states](https://ui.teamofsilicons.com/empty-states.md): Four empty states in one illustration whose shapes morph between scenes as you switch tabs.

## Blocks: Auth

- [Sign up form](https://ui.teamofsilicons.com/signup-form.md): An account creation flow with field validation, password strength, and a clear completion state.
- [Sign in](https://ui.teamofsilicons.com/sign-in.md): A sign in card that morphs from email to a six digit code to your account.
- [Centered login](https://ui.teamofsilicons.com/login-centered.md): A passkey-first login card on a quiet ring backdrop that morphs through email and code.
- [OTP input](https://ui.teamofsilicons.com/otp-input.md): A six digit verification flow with paste support and keyboard navigation.

## Blocks: Pricing

- [Plan comparison](https://ui.teamofsilicons.com/plan-comparison.md): Compare meaningful differences between plans and billing periods.

## Blocks: Media

- [File upload](https://ui.teamofsilicons.com/file-upload.md): A complete file selection flow with constraints, progress, and error feedback.

## Blocks: Heroes

- [Hero section](https://ui.teamofsilicons.com/hero-section.md): 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 editorial type over a mesh gradient.

## Blocks: Features

- [Comparison table](https://ui.teamofsilicons.com/comparison-table.md): An us versus them table with a sticky header, a highlighted column, and a stacked phone view.

## Blocks: Social proof

- [Logo marquee](https://ui.teamofsilicons.com/logo-marquee.md): A quiet, continuously moving row of brand marks with a pause control.
- [Stats band](https://ui.teamofsilicons.com/stats-band.md): 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.

## Blocks: Content

- [Changelog feed](https://ui.teamofsilicons.com/changelog-feed.md): Release notes you can filter, open in place, and scroll through month by month.
- [FAQ section](https://ui.teamofsilicons.com/faq-section.md): FAQs as an accordion, a topic rail, or a searchable list that highlights matches.
- [Contact section](https://ui.teamofsilicons.com/contact-section.md): A validated contact form that morphs into a confirmation, support channels, and office cards with local times.
- [Blog grid](https://ui.teamofsilicons.com/blog-grid.md): A blog index with a featured post, category filter, post cards, pagination and an in-place reader.

## Blocks: Headers and footers

- [Site header](https://ui.teamofsilicons.com/site-header.md): A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.
- [Site footer](https://ui.teamofsilicons.com/site-footer.md): A website footer with link columns and newsletter, a minimal layout, and a large fading Silicon UI mark.
- [CTA section](https://ui.teamofsilicons.com/cta-section.md): A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.
- [Newsletter signup](https://ui.teamofsilicons.com/newsletter-signup.md): An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.

## Other

- [Button link](https://ui.teamofsilicons.com/button-link.md): A link that looks exactly like a button, for actions that go somewhere.