Components
Every preview here is the component itself, running. Click, drag and tab through them, then open one to install it.
- components
- 117
- free and open source
- 45
Give each preview the whole screen.
Step through every one of the components one at a time, each on its own page with install and code. Or scroll down to browse the grid and try them side by side.
Buttons
3- ButtonThe base action. Five variants, a loading state that keeps focus and width, a press response, and a hold-to-confirm mode for actions that should not fire by accident.
- Copy ButtonCopies text to the clipboard, swaps its icon to a check, and announces it to screen readers.
pnpm dlx shadcn@latest add button - MagneticProWrap a button and it leans toward a nearby pointer, then gives a soft press when clicked.
Move around the button · click to press
Inputs
20- CalendarProA month grid for picking one date, with full keyboard navigation, range limits and disabled days.
- CheckboxAn ink-filled checkbox with mixed state support and a visible label.
- ComboboxA searchable single-choice picker with a clear action and keyboard selection.
- Date PickerProA button that shows the chosen date and opens a calendar popover. Picking a day fills it and closes.
No due date
- Email CaptureProAn email field and button in one pill, with progress, validation, an error line and a success state.
- Inline EditProEdit a value in place, with explicit save and cancel, validation and asynchronous retry.
Project name
Select the name to edit it. Enter saves; Escape cancels.
- InputA text input with leading and trailing slots, plus a Field that wires up label, description and error.
Shown in the sidebar and in URLs.
- Linked AllocationProMove one allocation while the others make room. Lock values, preserve the total, and redistribute the remainder proportionally.
- Number StepperAdjusts a small number with buttons or arrow keys. Digits roll with the change and nudge at the limits.
$36/month
31 to 10 seats
- OTP InputProA one-time code field drawn as slots over one input, so paste, SMS autofill and backspace all work.
Type or paste the 6-digit code.
- Password FieldA password input with a reveal toggle and a local strength indicator.
Strength: Empty. Use 12+ characters with varied letters, numbers and symbols.
- Precision Scrub FieldAdjust a number by dragging a ruler, fine-tune with modifiers, type an exact value, or change display units without changing the canonical value.
Drag the ruler or use arrow keys. Shift slows; Alt accelerates.
- Radio GroupA single-choice list of cards with sliding, fading, scaling, or instant selection and adjustable timing.
- Segmented ControlPicks one option from a small set. Behaves as a radio group, with a thumb that slides to the selection.
Showing the last week
- SelectA compact option picker with typeahead, keyboard navigation, a highlight that slides between options, and an ink checkmark.
Workspace
- SliderA precise range control with one or more thumbs and a live value readout.VolumePrice range
- Spring SwitchProA big, springy on and off switch. Click it or swipe the thumb across, and choose how much it bounces.
Motion is on
- SwitchTurns a setting on or off immediately. Click it, or swipe the thumb across. It stretches while pressed and springs into place.
- Tag InputA token editor with duplicate prevention, removable chips and a keyboard workflow.DesignResearch
Enter or comma adds a tag.
- TextareaA paper-like multiline field with an optional character counter.
0 / 240 characters
Feedback
9- AlertAn inline notice with a title, message and optional dismiss action.
Your workspace is ready
Invite collaborators whenever you are ready.Export paused
Check your connection and try again. - AvatarPortraits with an initials fallback, and a group that fans out on hover to name everyone, with the rest in a +N chip.ACSRLMMPAK+3LMMPAKNH+2ACSRLMMP
- BadgeA small label for status, counts and metadata, with an optional status dot.Draftv2.4.0NewFailed
- Empty StateA calm placeholder with an icon, explanation and a next action.
Room for something new
Keep your ideas, files and collaborators together.
- ProgressBar and ring indicators with determinate and indeterminate states.
- SkeletonA placeholder shape that holds the layout while content loads.
- TimelineProAn ordered activity trail with dates, details and completed markers.
Project created
A new home for your ideas.
Team invited
Three collaborators joined.
First review
Feedback is taking shape.
- ToastBrief notifications called from anywhere. They stack, pause on hover, swipe away, track a promise, and hold a change back until its undo runs out.
- TooltipA short label for a control, shown on hover and keyboard focus, with an optional shortcut hint.
Navigation
14- Mega MenuProA navigation bar whose items open wide panels of grouped links. One panel resizes between items, and a safe triangle keeps it steady on a diagonal path.
- AccordionStacked sections that expand to reveal their content, one at a time or several at once.A few sentences of supporting detail go here. They run long enough to wrap over several lines, the way a real answer would, so the panel has some height to open into. A closing line rounds it off.
- BreadcrumbA compact path trail with a clear current location.
- Command PaletteProA keyboard-first launcher. Search across grouped commands, move with the arrow keys, and run with Enter.
Nothing run yet
- Dropdown MenuA menu of actions opened from a button, with submenus, checkbox and radio items, keyboard shortcut hints and type-ahead.
- Hover TabsProTitles beside a panel. Point at a title, or reach it by keyboard, to show its content.
- Magnify DockProA row of items that swell under the pointer and settle back, with a label over the one you point at and a hop when clicked.
Point at the dock
- Morph MenuProA button that grows into its menu. The trigger stretches into a panel of options and shrinks back when one is chosen.
Nothing chosen yet
- NavbarProA top navigation bar with a hover pill that slides between links, an underline under the current page, a frosted look once scrolled, and a menu on narrow screens.
Scroll down, then back up
Research that keeps up with your team.
The bar is see-through at the top of the page. Once content passes under it, it turns frosted.
- PaginationA page navigator with compact and neighboring ranges, text-only and outline styles, and optional sliding numbers.
Page 1 of 12
- Scroll RailProA horizontal section driven by vertical scrolling. The frame pins, the strip travels sideways through any content, and a counter reads 01, 1, or your own labels.
How it works
Four steps from first sketch to launch.
Scroll down
Sketch
Start rough
Every item is an ordinary list item. Put text, images or whole layouts in it.
Tune
Dial it in
Measure
Watch it land
Ship
Send it out
Item 1 of 0
- Sidebar MenuProA button that opens a panel of options from the side. Rows arrive one after another, a highlight follows the pointer, and groups open in place.Current pageInbox
- StepperProA numbered workflow trail with completed, current and upcoming steps.
Name your studio.
CompletedBring your collaborators.
Current stepMake something considered.
Upcoming
- TabsSwitches between panels in the same context. The active indicator slides between tabs instead of jumping.A summary of activity across every project in the workspace.
Overlays
8- Context MenuA right-click menu of actions, with submenus, keyboard shortcut hints, disabled items and destructive actions.
Right-click the canvas
- DialogA modal for a focused task or decision. Traps focus, closes on Escape, and scrolls when tall.
- DrawerA panel that slides in from the bottom, left or right edge, drags away, and handles focus like a dialog.
- Hover CardA quiet preview card for links, with delayed opening and collision-aware positioning.
- Link PeekProA link that previews where it goes: the page's image, title and site, sliding along under the pointer and leaning as it moves.
We shot the series over a week, starting at the northern coast and ending in the outer island.
- PopoverAn anchored surface for small settings, forms and contextual details.
- Radial MenuProA button whose actions fan out around it. Click one, or press, drag toward it and let go in a single movement.
- Share PanelProA Share button whose panel copies the link, sets access, and sends to people or channels.
Data
13- Contribution GraphProA commit-style heatmap: one square per day, darker when busier, read by pointer or keyboard.
- Data TableProA typed table with sortable columns and loading, empty and error states. Scrolls sideways when narrow.
Recent invoices Status INV-1044 Globex Overdue $3,120.00 INV-1046 Umbra Studio Open $2,075.25 INV-1042 Northwind Traders Paid $1,280.00 INV-1043 Acme Supply Open $640.50 INV-1045 Initech Paid $92.00 - Filter BarProSingle-choice filter chips with anchored editors, removable values and a controlled filtering workflow.
- Refine onboardingAda
- Update icon libraryLeo
2 of 4 tasks
- Line ChartProA scrubbable chart with one line or several. Read any point by hover, drag or keys; lines morph on change.
Visitors
- SheetProAn editable spreadsheet with cell ranges, sorting, filtering, row selection and column resizing.Identity systemAda ChenIn reviewMar 1464$4,800$4,120Website refreshSam RiveraBuildingApr 2120$7,200$3,950Product photosLee MorganDoneFeb 2032$2,400$2,400Launch campaignMia PatelPlanningMay 948$3,600$600Onboarding emailsJon OkaforBuildingApr 1828$1,800$940Pricing pageAda ChenIn reviewMar 2822$1,500$1,310Docs overhaulPriya ShahPlanningJun 180$5,200$0Help centerSam RiveraDoneJan 3140$2,600$2,4808 rows
- Animated NumberA number that animates to new values: digits roll like an odometer, or the whole number counts up. Formats with Intl for currency, percent and more.482,905
- Bar ChartProAn inspectable column chart with quiet gridlines, animated values and a text data alternative.
Weekly sign-upsFocus a bar to inspect Weekly sign-ups data Category Value Mon 48 Tue 32 Wed 72 Thu 64 Fri 92 Sat 52 - Clock FaceProA live clock: an analog dial with a sweeping or ticking second hand, or digits that roll over, in any time zone.----
- Dotted GlobeProA slowly turning globe of dots with pulsing markers. Drag or use the arrow keys to spin it.
- San Francisco
- London
- Tokyo
- Sydney
- GaugeProA half-ring meter with a readable value and configurable bounds.Adjust capacity
- Ring ChartProParts of a whole as a ring. Arcs morph with the data, and the middle rolls to the part you point at.Rounding
Earnings by source. Earned: $4,093. Plans $1,832 45% Products $1,147 28% Services $637 16% Affiliates $291 7% Licensing $186 5% - SparklineA small trend line for compact metrics, with optional area fill.
Active projects
128
+18 this month
- World MapProA dotted world map with labelled markers and routes that draw themselves. No map library or tiles.
- San Francisco
- London
- Singapore
- São Paulo
- Route from San Francisco to London
- Route from London to Singapore
- Route from San Francisco to São Paulo
Media
17- Anchored AnnotationsProPlace comments on image coordinates, inspect numbered anchors, and resolve or reopen annotations from an accessible list.
- Resolved
- CarouselProScroll-snapping slides you move with buttons, dots, arrow keys or by dragging with the mouse.
Bay at sunset 
Sea stacks 
The island 
Autumn shore - Comparison LensProInspect an aligned image through a movable lens. Pin the view, blend layers, or inspect an application-supplied difference image.
- Cursor GalleryProA list of titles where pointing at one brings up its image, which trails the pointer, leans as it moves and crossfades as you go.
- Curved ScreenProAn image or a video on a gently curved 3D screen, built from thin strips, that leans toward the pointer.
- Depth FieldProPhotos floating at different depths in 3D. The pointer steers the camera; a click brings one forward while the rest fade back.
- Expanding CardProAn image-first card that grows into a dialog with the rest of its story, then returns to its place.
- Flip CardProA card that turns over to show its back, rolling the way the pointer moves: in from the left, it turns right; out the top, it turns up.
Pagoda 
Crossing - Focus RailProA row of images with one in focus. The rest step back, smaller, dimmer and softer, with the gaps kept even at every size.Granite Dome, 3 of 9
- Image CompareBefore and after images under one draggable divider, with a native slider for keyboard and touch.
- LightboxProThumbnails that grow into a full-screen viewer. Swipe, or use the arrow keys or buttons, to move between.
- Now PlayingProA music card: cover art that leans toward the pointer, a scrubbable progress bar, transport controls and an accent picked from the artwork.
Take Care
Drake
- Orbit GalleryProImages on a tilted 3D ring. Drag or flick it and it settles on the nearest image; click one to bring it round to the front.Take Care by Drake, 1 of 10
- Settle GridProPhotos tossed loosely on a table that settle into a neat grid as they come into view, or in step with the scroll.
- Shelf FlowProCovers on a shelf: the one in front faces you, the rest turn on their sides and stack, with a soft reflection beneath.Blonde, 4 of 8
- Shutter RevealProAn image gallery that changes images in slices: sliding in, opening like blinds, or folding round in 3D.
1 / 5Dandelions below the Dolomites, 1 of 5 - Zoom FrameProMedia that starts as an inset, rounded card and opens to fill the view as the page scrolls, then softens as it leaves.
Gestures
7- Resizable PanelsProTwo panes with a draggable divider, percentage limits, keyboard resizing and optional collapse.
Files
Overview
Components
Tokens
A little room to work
Drag the divider to arrange your workspace. Focus it and use the arrow keys for a precise adjustment.
Enter collapses or restores the first pane.
- Card StackProA stack or a loose pile of cards. Throw the front card in any direction and it tucks in at the back.Less, but better., 1 of 3
- Elastic StripProA row of cards you drag sideways. Cards further from your grab trail behind, so the strip stretches and leans, then springs straight.
Take CareDrake 
To Pimp a ButterflyKendrick Lamar 
AntiRihanna 
SOSSZA 
BlondeFrank Ocean 
good kid, m.A.A.d cityKendrick Lamar 
The BlueprintJAY-Z 
MadvillainyMadvillain 
My Beautiful Dark Twisted FantasyKanye West 
Until Night ComesLarry June - File DropzoneProDrop or browse for files. Validates type, size and count, explains rejections, and lists what was added.
- Selection AreaProDrag a box across items to select them, as on a desktop. Caught items dip and keep an outline.0 selectedDesignsBrief.mdHero.pngNotes.mdArchiveLogo.svgPlan.mdShots
Drag across the files, or click one. Hold Shift to add more.
- Sortable ListProA list you reorder by dragging a handle, or entirely from the keyboard, with every move announced.
- Ship onboarding redesignDesign
- Fix checkout timeoutPayments
- Migrate search indexPlatform
- Write Q3 roadmapProduct
- Swipe DeckProA stack of cards you sort one at a time by swiping left or right. Buttons and arrow keys do the same thing.
Turquoise lake
4.2 km loop · Easy
Drag a card, use the buttons, or press the arrow keys.
Text
7- Cinematic TextProA headline whose words drift out of a heavy blur and settle into focus as it scrolls into view.
Interfaces that move with intent.
- KbdKeyboard shortcut hints drawn as keycaps. Labels follow the visitor's platform, and the caps press down while the real keys are held.CommandShiftPGthenDShift?Escape
Hold the keys to press the caps.
- Rise TextProLetters rise into place one beat at a time, out of a clipped line. An entrance with a little character.
- Stagger TextProText that swaps for a second line on hover, its letters rolling one after another under a wave of color.Hover me
- Text MorphProText that rearranges through shared letters as the phrase changes.Design with care
- Text ShimmerA restrained highlight that travels across text and stops with reduced motion.Making room for your next idea
A quiet moment of anticipation.
- Word DrumProA word in a sentence that rolls to the next on a 3D drum, with the words before and after curving away above and below.
Interfaces that feel calm or quick or crafted or alive or obvious
Effects
8- Dither ImageProAny image drawn in a few colors with a dither, that dissolves in pixel by pixel and shows the original under a lens.
- Line DrawSVG strokes that write themselves in, one after another. A signature, an underline or a checkmark.
- MarqueeAn endless, seamless scroll of logos, quotes or cards, with a set speed, direction and hover behavior.NorthwindUmbra StudioFieldnoteKestrelAcme SupplyHalcyonBrightwaterOxide
- Particle RevealProThousands of particles fly in from a scatter and settle into a word or an image, in any colors.
- Path MarqueeProItems that travel without end along a curved arc, or along any path you draw, turning to follow it.
- Progressive BlurProA blur that builds toward one edge, so content under a floating bar melts away instead of being cut off.
- Ripple GridProA grid of dots that sends a wave out from wherever you click. Distance does the choreography.
- SquircleProContinuous corners: the curve flows out of the straight edges instead of meeting them at a seam, like Apple's icons and Figma's corner smoothing.RadiusSmoothing
The dashed line is a plain rounded corner. Smoothing starts the curve earlier and eases out of it, so there is no seam where the edge turns.
AI
11- Assistant MessageOne reply from an assistant. Streamed words fade in so the text fills from top to bottom, then copy, retry and feedback appear beneath it.
- Chat WorkspaceProA complete chat, ready to skin: replies that stream in, a box to write in, and a list of past conversations. Full page like a chatbot, or a side panel for an in-app copilot.
Assistant
What can I help with?
- Diff ViewA change to one file, for review: its path, lines added and removed, numbered and highlighted lines, and buttons to accept or reject it.
app/dashboard/page.tsx
+5 lines added,−3 lines removed
- export default async function Dashboard({ session }) {
- // Load everything the page needs.
- const user = await getUser(session)
- Removed: const projects = await getProjects(user.id)
- Removed: const activity = await getActivity(user.id)
- Removed: const billing = await getBilling(user.id)
- Added: const [projects, activity, billing] = await Promise.all([
- Added: getProjects(user.id),
- Added: getActivity(user.id),
- Added: getBilling(user.id),
- Added: ])
- return (
- <DashboardView
- Image ResultProA generated image from waiting to done: “Generating image” shimmers over a drifting placeholder, then the time it took and the image washing in, with download, regenerate and feedback.
A quiet valley at dawn, soft light
Generating image
A quiet valley at dawn in soft light - Permission RequestProAn agent asking before it acts: what it wants to do, how risky it is, what will change, and buttons to apply, always allow or deny.
Edit app/dashboard/page.tsx
low riskReplace the sequential awaits with one Promise.all.
app/dashboard/page.tsx
+1 lines added,−2 lines removed
- const user = await getUser(session)
- Removed: const projects = await getProjects(user.id)
- Removed: const billing = await getBilling(user.id)
- Added: const [projects, billing] = await Promise.all([getProjects(user.id), getBilling(user.id)])
- Prompt BoxThe box at the bottom of a chat. It grows as you type, takes files, picks a model, listens, and turns send into stop while a reply is written.
- Support BubbleProA support assistant in the corner of your site. It starts as a button with a “Need help?” bubble, opens into a chat, can ask who you are first, and hands over to a person when it is not sure.
Your site. Open the assistant in the corner, then ask about refunds, or something it can’t answer.
- Task PlanProAn agent's plan as a checklist it works through: a ring that fills as steps finish, what each step is doing, and a clear red mark when one fails.
Plan0 of 5
Read the settings page, in progress
Reading app/settings/page.tsx
Add a theme toggle, to do
Wire it to next-themes, to do
Run type check and tests, to do
Update the settings docs, to do
- Thinking PillA small pill that says what an assistant is busy with. The status shimmers dark to light, and each new one slides in over the last.Thinking
- Thought TraceThe reasoning behind a reply, folded into one line. It shimmers “Thinking”, then says how long it took; open it to see each thought, search, page read and tool call.
- They want saves to feel instant, so the question is how to update before the server answers.
- Still thinking
- Tool RunProOne tool call by an agent on a single line: the tool, its argument, what it is for, how long it took and whether it worked. Open it for the details and output.
- path app/dashboard/page.tsx
- lines 18–41
const user = await getUser(session) const projects = await getProjects(user.id) const activity = await getActivity(user.id) const billing = await getBilling(user.id)
edit_file(page.tsx)Run the queries in parallel, Waitingread_file(page.tsx)Re-read the page, Waitingedit_file(page.tsx)Run the queries in parallel, Waiting