500+ free components, blocks and motion pieces for product UI: data tables, billing, settings, command palettes and AI chat. Built on Base UI, Tailwind CSS v4 and motion.
Sidebar section that groups nav items under an optional small uppercase heading with tight spacing. Stack several inside the Sidebar to organize app navigation.
Draw a signature with mouse, pen or finger on a canvas with pressure aware strokes, undo and clear, a typed name fallback and PNG export for forms.
A centered Tailwind sign in page in an auth card with social login buttons, email and password fields, a full width submit and a sign up link in the footer.
Create account form with GitHub and Google buttons, required name, email and password fields, a submit button and a Sign in link, all inside an AuthCard.
Tailwind skeleton loader with a sunken plate and a soft sheen that sweeps every 1.6s, plus a SkeletonCard preset with title, text lines and a media block.
Skip to content link that stays visually hidden until focused, then appears fixed in the top corner so keyboard users can jump past navigation in any React app.
React slash command menu that filters commands by the typed query, shows each as /name with an optional hint, and falls back to a No commands message.
Slider on Base UI with a hairline rail, a keycap thumb, a value bubble while dragging, optional labelled marks, Intl number formatting and vertical support.
Two-column row of Continue with GitHub and Continue with Google buttons with click handlers, ready to sit above email fields on sign in and sign up screens.
Social proof row of up to five overlapping avatars with initials fallback, next to a count label like 2,000 teams. Built in React for landing page heroes.
A testimonial wall with a logo marquee that pauses on hover and three columns of quote cards drifting at different speeds, with metric chips and edge fades.
A stack of three offset cards that spring up into a layered, slightly scaled pile when scrolled into view. A compact depth visual for feature sections.
Sortable table header button that shows an up, down or neutral arrow for the current sort direction and calls onToggle on click. Pairs with any Tailwind table.
Drag to reorder a list in React with Motion Reorder, plus Arrow key reordering from the handle and polite announcements of every move for screen readers.
Citation source card for AI answers showing a title, a source badge, the truncated URL and a short snippet. List references under a generated response.
Headline text with four point stars that twinkle around it in your accent colors. The sparkles are decorative and hidden; the text stays plain and readable.
Responsive grid of metric cards, each with a label, value, delta chip and a small area chart sparkline. Good for a KPI overview at the top of a React dashboard.
Loading spinner in sm, default and lg sizes with role status and an accessible Loading label. Drop it into buttons, cards or full page states in a Tailwind app.
Split button with a primary action and a chevron that opens a dropdown of secondary actions, including destructive items. The menu matches the button width.
Split-flap display that flips each character through the alphabet like a departure board, with a column ripple, tones, sizes and reduced motion support.
Static two-column split pane that stacks on mobile and sits side by side from md up, with a hairline divider. Handy for compare views and editor previews.
A two column proof section with a badge, pitch copy and checklist on one side, and key facts on gallery, registry and quality gates rising in on the other.
SQL query result table with uppercase column headers, monospace cells and horizontal scroll for wide results. Built for database consoles and admin tools.
SSO provider card with a name, description, Configured or Not set badge, an enable switch and a Configure button. A React block for SAML and OIDC settings.
Vertical stack layout primitive that arranges children in a flex column with a gap prop from 1 to 8 on a 4px scale. Accepts all normal div props in React.
Stacked bar chart that splits each column into colored series segments with hover titles, category labels underneath and a series legend. Uses chart CSS tokens.
Three story cards that rise and overlap into a stack on wider screens as they scroll into view, falling back to a simple vertical list on mobile.
Stack trace block that shows an error trace in a monospace pre with a danger tint and scroll for long output. Useful in error pages, logs and debug panels.
React stat card with a label, optional icon, a large tabular value and a delta chip colored by its sign, with invertDelta for metrics like churn or latency.
A single stat that counts up from zero to its value once it is in view, with a label below. Combine several in a row for landing page metrics.
Metric card with a label, a large value, a signed delta and an edge-to-edge area sparkline that turns red when the trend is down. Built for React dashboards.
Tailwind stats strip of centered value and label cells split by hairlines, two columns on mobile and four on desktop. Shows traction numbers on landing pages.
Tailwind status badge with a tinted fill, hairline border and colored dot in neutral, success, warning, danger, accent and info tones that read as one set.
Small status dot in neutral, success, warning, danger and accent tones, built with cva. Place it next to labels for online, healthy or failing indicators.
A status marketing section with an incident banner, operational badge, gradient headline and uptime bars for showing off reliability on a public page.
A React system status panel with an overall outage badge and a list of services, each marked operational or degraded by a colored health indicator.
Numbered stepper for multi-step forms that shows each step as a bar and a label, highlighting completed and current steps. Semantic ordered list in React.
Step progress bar made of segments that fill in accent for completed and current steps, with small labels under each. Fits checkout and onboarding flows.
Sticky bottom action bar with a translucent blurred background and a hairline top border. Keeps save, cancel or checkout actions in reach on long pages.
Sticky table column wrapper that pins content to the left or right edge with a solid background and divider while the rest of a wide table scrolls horizontally.
A Tailwind floating CTA bar that slides up from the bottom once the page scrolls past 320px, with a title, a docs link and a magnetic get started button.
A sticky scroll section where the active step highlights as you scroll and a pinned preview swaps with a step counter. Pass your own steps as props.
Stop generating button with a filled square icon and an onClick handler, for cancelling a streaming AI response mid-answer in chat interfaces built with React.
Streak calendar showing a 28-day grid in seven columns, with active days filled in accent. Useful for habit tracking, learning apps and activity views.
Blinking caret that sits inline at the end of streaming text, sized to the line and hidden from screen readers. Signals an AI response is still arriving.
Chat message bubble that renders partial AI output with a blinking caret at the end, for showing token-by-token streaming responses in a Tailwind chat UI.
Row of rounded suggestion chips such as Summarize or Find bugs that call onSelect when clicked. Use them as prompt starters under a React AI chat input.
A React support ticket inbox with search and compose actions and a list of threads showing ticket ID, subject, requester, status badge and SLA time left.