Silicon UI
React components and blocks with calm, physical motion. 109 components and 22 blocks, each plain source you own, free and MIT licensed, by Team of Silicons.
Install
Works in Next.js and Vite, with or without Tailwind. React 19 is required. Register the registry once, install the foundation once, then add anything by name.
If the project does not use shadcn yet, run
npx shadcn@latest initonce. Then register@silicon-uiincomponents.json.components.jsonjsonInstall the foundation once per app. It brings the design tokens and motion presets every item reads.
npx shadcn@latest add @silicon-ui/silicon-foundationImport
components/silicon-ui/foundation.cssonce, in the root layout or entry file.Add any component or block by name. Local dependencies come along with it.
npx shadcn@latest add @silicon-ui/button
Set data-theme, data-accent and data-corners on <html> to change the appearance. The switches at the bottom of the sidebar do the same here. Corners are squircles by default.
AI tools
Every item has a Markdown page at /<id>.md with install steps, usage and the full props reference. llms.txt lists them all. shadcn's MCP server (npx shadcn@latest mcp init) can search and install from @silicon-ui directly. The source is on GitHub.
Components
109 parts. Each page is the real component, with live props and docs generated from the source.
Actions
ButtonA clear, responsive action with quiet secondary states.Action buttonA compact button for frequent toolbar actions.Split buttonA primary action with a menu of nearby alternatives.Button groupRelated 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 groupSeparate 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 groupIcon 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 buttonCopy a value with immediate confirmation.Confirm morphA destructive button that morphs into an inline confirmation, a spinner, and a result with undo.Hold to confirmConfirm a destructive action by holding, not tapping.Swipe actionsReveal row actions with a swipe, or from the same actions in a menu.Dropdown menuA focused list of actions anchored to a trigger.Context menuSecondary actions kept close to the selected object.User menuYour account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.Theme switcherFour smooth ways to move between light and dark appearance.EclipseThe next appearance crosses the page like an eclipse.SplitThe next appearance opens from a slim center seam.RiseThe next appearance rises into place.
Inputs
InputA single line field with clear labels and useful states.TextareaA multiline field for notes, descriptions, and longer text.Password fieldCapture sensitive text with a visible reveal control.Password strengthShow how strong a new password is while it is typed.Search fieldA recognizable search entry point with clear affordances.Expanding searchAn icon that morphs into a search field with results beneath it.Inline editRename in place: the text becomes a field without moving.Number fieldEnter a bounded number with clear increment controls.Money inputA currency field with live grouping, stable width, rolling digits, and minor-unit output.Phone inputA phone field with a country picker, formatting as you type, and E.164 output.Tag inputTurn short text values into removable tags.Mention inputA textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.Shortcut recorderRecord key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.SelectA compact choice field with a keyboard friendly menu.ComboboxSearch and select from a list without leaving the field.Multi-selectSelect several values while keeping the field readable.Morph selectA select whose trigger grows into the list, with a gliding highlight and type-ahead.Chip groupFilter by a few facets with chips that morph as you pick them.Radio cardsSelectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.Billing toggleA monthly and yearly switch with a savings badge and prices that roll to the new amount.CheckboxA binary choice with a precise, legible state.Radio groupChoose one option from a visible set.SwitchA tactile toggle for settings that take effect immediately.Segmented controlSwitch between a small set of related views.SliderPick a value or a range on a track that follows your finger.Elastic sliderA slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.CalendarBrowse dates in a clear, compact month view.Date pickerChoose a date without losing context.Date range pickerA range picker that grows from its trigger into two months with presets and a stretching range highlight.Time pickerChoose a time with sensible keyboard behavior.Color pickerA swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.Rich text editorA lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.Signature padSmooth ink that thins with speed, with undo, replay, and PNG or SVG export.File dropzoneA generous target for dropping one or more files.
Disclosure
TabsSwitch between related content in the same context.BreadcrumbShow where a page sits in a hierarchy.PaginationMove through a long collection with clear bounds.Scroll areaA native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.AccordionProgressively reveal supporting information in place.Expandable cardGive a dense card more room when requested.Resizable panelsTrade space between panes by dragging the divider between them.DialogA focused surface for decisions that need attention.DrawerA temporary side surface for focused work.Bottom sheetA sheet that rests at a peek or full height and follows your finger.PopoverA small anchored surface for contextual information.Hover cardPreview a person or link on hover or focus without leaving the page.TooltipShort supporting text for unfamiliar controls.
Feedback
AlertA persistent message that helps people recover or continue.ToastBrief confirmation for a completed background action.Toast stackStack short results at the edge until you reach for them.Announcement barA top banner that rotates messages, counts down, and collapses smoothly when dismissed.ProgressShow how much of a known task is complete.SkeletonReserve space while content is still loading.StepperShow where a person is in a multi-step flow and what is done.CountdownA launch countdown with rolling digits that morphs into a live state at zero.Usage meterShow what fills an allowance and how close it is to the limit.
Data
AvatarA compact identity marker for people and accounts.Avatar groupShow a team or set of contributors in a small space.BadgeA small label for status, category, or metadata.CardA contained group of related content and actions.Metric cardA compact summary for a number that needs context.Empty stateA useful next step when there is nothing to show yet.Line chartA multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.Bar chartCompare one measure across days and scrub any bar for its value.Donut chartA donut whose arcs morph between datasets, with the active value rolling into the center.StreamgraphLayered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.Brush chartA dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.Waffle chartA ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.Slope chartBefore and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.SparklineShow a compact trend beside a value.GaugeShow a value against a known range.Activity heatmapSee a year of activity at a glance, one square per day.Animated counterGive changing totals a clear sense of movement.RidgelineOverlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.TreemapA 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 tableCompare structured records with sortable columns.Tree viewNavigate nested folders and structured content.Filter toolbarKeep collection filters close and easy to reset.Code blockPresent code with legible hierarchy and copy access.JSON viewerA collapsible JSON tree with search, paging for long arrays, and copy value or path.TimelineFollow what happened, newest first, grouped by day.Comment threadThreaded comments with replies, reactions, mentions, inline edit, and resolve.Chat threadA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.Image compareDrag a divider across two images to see what changed.CarouselBrowse a row of slides by dragging, flicking, or arrowing through them.Card stackReview a deck one card at a time, with a throw and an undo.
Text
Special
Other
Blocks
22 composed sections, built from the same components.
Page headerA project page header that folds into a compact bar as you scroll, with tabs whose counts roll.Command paletteA complete keyboard driven action surface with search, grouped results, and shortcuts.Notification centerA home for updates with read state, grouped information, and animated disclosure.Empty statesFour empty states in one illustration whose shapes morph between scenes as you switch tabs.Sign up formAn account creation flow with field validation, password strength, and a clear completion state.Sign inA sign in card that morphs from email to a six digit code to your account.Centered loginA passkey-first login card on a quiet ring backdrop that morphs through email and code.OTP inputA six digit verification flow with paste support and keyboard navigation.Plan comparisonCompare meaningful differences between plans and billing periods.File uploadA complete file selection flow with constraints, progress, and error feedback.Hero sectionThree 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.Comparison tableAn us versus them table with a sticky header, a highlighted column, and a stacked phone view.Logo marqueeA quiet, continuously moving row of brand marks with a pause control.Stats bandHeadline 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.Changelog feedRelease notes you can filter, open in place, and scroll through month by month.FAQ sectionFAQs as an accordion, a topic rail, or a searchable list that highlights matches.Contact sectionA validated contact form that morphs into a confirmation, support channels, and office cards with local times.Blog gridA blog index with a featured post, category filter, post cards, pagination and an in-place reader.Site headerA sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.Site footerA website footer with link columns and newsletter, a minimal layout, and a large fading Silicon UI mark.CTA sectionA call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.Newsletter signupAn email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.
Credits
Silicon UI started as a fork of Arc by Elia Kuratli, released under the MIT License. Demo photographs are from Unsplash. Silicon UI is MIT licensed.