# Sassly UI

> Shared components for every Sassly product. Live, themed, and ready to copy into React or HTML. Version 0.1.2. React package `@sassly/ui` and a CDN bundle for plain HTML, both built from the same files.

Start with the rules for AI tools: https://uiux.sassly.ai/ai/AGENTS.md. Each item below links to its card (when to use it, install, usage, props, files).

## Components

- [Sourced Reply](https://uiux.sassly.ai/ai/sourced-reply.md): AI. Streams an AI answer with numbered sources and citation chips you can hover.
- [Ask Bar](https://uiux.sassly.ai/ai/ask-bar.md): AI. A message composer with attachments, a model menu, voice input and send.
- [Thought Trail](https://uiux.sassly.ai/ai/thought-trail.md): AI. Shows an AI at work: a live timer, the sources it searched and the steps it finished.
- [Helper Pane](https://uiux.sassly.ai/ai/helper-pane.md): AI. A compact assistant card with a soft glow and one-tap suggestions.
- [Busy Badge](https://uiux.sassly.ai/ai/busy-badge.md): AI. A small status pill for AI replies that says what it is doing right now.
- [Reply Tools](https://uiux.sassly.ai/ai/reply-tools.md): AI. Copy, rate and regenerate under a reply, with a reason picker on thumbs down.
- [Engine Select](https://uiux.sassly.ai/ai/engine-select.md): AI. Choose a model by speed, cost and context size, with the current one on top.
- [Member Select](https://uiux.sassly.ai/ai/member-select.md): Inputs. Search and pick one or many people from a grouped list, all by keyboard.
- [Quick Run](https://uiux.sassly.ai/ai/quick-run.md): Inputs. One field that finds pages, runs actions and shows the shortcut for each.
- [Period Calendar](https://uiux.sassly.ai/ai/period-calendar.md): Inputs. Two months, quick presets and a live preview of the range as you hover.
- [Drop Shelf](https://uiux.sassly.ai/ai/drop-shelf.md): Inputs. Drop files to upload them, with progress for each file, retry and size checks.
- [Passcode Boxes](https://uiux.sassly.ai/ai/passcode-boxes.md): Inputs. A one-time code input with a gliding focus ring, paste support and a verified state.
- [Segment Rail](https://uiux.sassly.ai/ai/segment-rail.md): Inputs. Two to six options in one bar, with a thumb that slides to the current choice.
- [Wizard Steps](https://uiux.sassly.ai/ai/wizard-steps.md): Inputs. A multi-step setup form with progress, validation and a review step.
- [Refine Chips](https://uiux.sassly.ai/ai/refine-chips.md): Inputs. Stackable filter chips with an add-filter menu and a clear-all action.
- [Action Buttons](https://uiux.sassly.ai/ai/action-buttons.md): Inputs. Primary, secondary, ghost, accent and danger buttons in three sizes, with loading.
- [Flash Notes](https://uiux.sassly.ai/ai/flash-notes.md): Feedback. Toasts that stack neatly, fan out on hover and can be undone.
- [Allowance Bar](https://uiux.sassly.ai/ai/allowance-bar.md): Feedback. Plan usage as a stacked bar, with credits left and the next reset date.
- [Consent Check](https://uiux.sassly.ai/ai/consent-check.md): Agents. An agent asks before it acts: allow once, always, or decline with a note.
- [Task Pulse](https://uiux.sassly.ai/ai/task-pulse.md): Agents. One agent run at a glance: current step, elapsed time, cost and controls.
- [Work Line](https://uiux.sassly.ai/ai/work-line.md): Agents. Waiting, running and finished jobs with live counters and throughput.
- [Branch View](https://uiux.sassly.ai/ai/branch-view.md): Agents. An orchestrator and the sub-agents it started, with status on every branch.
- [Co-edit Pointers](https://uiux.sassly.ai/ai/coedit-pointers.md): Agents. Agents editing a document beside you, each with a named cursor and selection.
- [Autopilot Level](https://uiux.sassly.ai/ai/autopilot-level.md): Agents. Set how much an agent may do on its own, from ask-first to fully automatic.
- [Tool Receipt](https://uiux.sassly.ai/ai/tool-receipt.md): Agents. A tool call with its input, output, duration and a button to run it again.
- [Latency Cascade](https://uiux.sassly.ai/ai/latency-cascade.md): Agents. A trace as a waterfall of timed spans, with the slow ones flagged.
- [Figure Card](https://uiux.sassly.ai/ai/figure-card.md): Data. A KPI with a rolling number, change against last period and a chart you can hover.
- [Record Grid](https://uiux.sassly.ai/ai/record-grid.md): Data. A table with sorting, row selection, status pills and a bulk-action bar.
- [Edit Proposals](https://uiux.sassly.ai/ai/edit-proposals.md): Data. Proposed edits shown inline, with accept and reject for each change.
- [Identity Menu](https://uiux.sassly.ai/ai/identity-menu.md): Navigation. A profile menu with a workspace switcher, theme choice and sign out.
- [Tag Field](https://uiux.sassly.ai/ai/tag-field.md): Forms. Type to add tags, pick from suggestions, colour them and remove them again.
- [Category Select](https://uiux.sassly.ai/ai/category-select.md): Forms. Choose several categories from a grouped list with counts and select-all per group.
- [Nested Categories](https://uiux.sassly.ai/ai/nested-categories.md): Forms. A category tree that expands, collapses and checks whole branches at once.
- [Type Ahead](https://uiux.sassly.ai/ai/type-ahead.md): Forms. An input that suggests matches as you type, with the matched letters highlighted.
- [Date Field](https://uiux.sassly.ai/ai/date-field.md): Forms. Pick one date from a calendar popover, with quick picks such as Tomorrow and Next Monday.
- [Colour Mixer](https://uiux.sassly.ai/ai/colour-mixer.md): Forms. Choose a colour with a saturation area, hue and opacity sliders, hex input and swatches.
- [Value Slider](https://uiux.sassly.ai/ai/value-slider.md): Forms. A slider for one value or a range, with steps, marks and a live value bubble.
- [Tick Box](https://uiux.sassly.ai/ai/tick-box.md): Forms. Checkboxes for lists and cards, with descriptions and a partial state for parents.
- [Single Choice](https://uiux.sassly.ai/ai/single-choice.md): Forms. Radio choices as a list or as selectable cards, moved with the arrow keys.
- [Long Text](https://uiux.sassly.ai/ai/long-text.md): Forms. A text area that grows with its content, with a character count and a soft limit.
- [Prose Editor](https://uiux.sassly.ai/ai/prose-editor.md): Forms. A rich text editor with headings, bold, italic, lists, links and quotes.
- [Attach Field](https://uiux.sassly.ai/ai/attach-field.md): Forms. Upload one file or a profile photo with a preview, replace and remove.
- [Pick List](https://uiux.sassly.ai/ai/pick-list.md): Forms. A select menu with search, groups, icons and short descriptions.
- [Star Score](https://uiux.sassly.ai/ai/star-score.md): Forms. A rating input with stars, half steps and a word for each score.
- [Hint Bubble](https://uiux.sassly.ai/ai/hint-bubble.md): Overlays. Short labels that appear on hover or focus, with placement, delay and shortcut hints.
- [Float Panel](https://uiux.sassly.ai/ai/float-panel.md): Overlays. A panel anchored to a trigger for quick settings or details, closed by an outside click or Escape.
- [Modal Window](https://uiux.sassly.ai/ai/modal-window.md): Overlays. A dialog for confirmations and short forms that keeps focus inside until it closes.
- [Action Menu](https://uiux.sassly.ai/ai/action-menu.md): Overlays. A button that opens a menu of actions with icons, shortcuts, a submenu and a destructive item.
- [Slide Panel](https://uiux.sassly.ai/ai/slide-panel.md): Overlays. A side sheet that slides in from the edge for details and forms, with a header and footer.
- [Right-click Menu](https://uiux.sassly.ai/ai/right-click-menu.md): Overlays. A context menu that opens at the pointer on right click or a long press.
- [Search Spotlight](https://uiux.sassly.ai/ai/search-spotlight.md): Search. A search popup with recent searches, scopes and keyboard navigation.
- [Omni Search](https://uiux.sassly.ai/ai/omni-search.md): Search. Search people, tickets, orders and articles at once, with filters and a preview.
- [Media Viewer](https://uiux.sassly.ai/ai/media-viewer.md): Media. Open images and videos in a lightbox with zoom, thumbnails and swipe.
- [Callout](https://uiux.sassly.ai/ai/callout.md): Feedback. Inline messages for information, success, warnings and errors, with actions and dismiss.
- [Top Notice](https://uiux.sassly.ai/ai/top-notice.md): Feedback. A slim announcement bar across the top of a page with a link and close button.
- [Blank State](https://uiux.sassly.ai/ai/blank-state.md): Feedback. Empty screens that explain what goes here and offer the first step.
- [Page Steps](https://uiux.sassly.ai/ai/page-steps.md): Navigation. Pagination with page numbers, a jump field and rows per page.
- [Site Chat](https://uiux.sassly.ai/ai/site-chat.md): Messaging. A chat widget for websites: a launcher bubble that opens a conversation panel.
- [Typing Dots](https://uiux.sassly.ai/ai/typing-dots.md): Messaging. Show that someone is typing, with soft animated dots and their name.
- [Dial Pad](https://uiux.sassly.ai/ai/dial-pad.md): Calls. A phone keypad with letters, a number field, paste and call and delete buttons.
- [Call Bar](https://uiux.sassly.ai/ai/call-bar.md): Calls. Live call status with the caller, a timer, and mute, hold, transfer, keypad and end.
- [Incoming Call](https://uiux.sassly.ai/ai/incoming-call.md): Calls. A ringing call card with caller details, accept, decline and quick replies.
- [History Line](https://uiux.sassly.ai/ai/history-line.md): Data. A vertical timeline of events with icons, times and days grouped together.
- [Sticky Wall](https://uiux.sassly.ai/ai/sticky-wall.md): Workspace. Post-it notes you can add, colour, edit and drag around a board.
- [Line Trend](https://uiux.sassly.ai/ai/line-trend.md): Charts. Line and area charts for trends over time, with hover readouts and series toggles.
- [Column Bars](https://uiux.sassly.ai/ai/column-bars.md): Charts. Vertical bars, grouped or stacked, with labels and hover detail.
- [Ranked Bars](https://uiux.sassly.ai/ai/ranked-bars.md): Charts. Horizontal bars sorted by value, with labels inside and a target line.
- [Share Donut](https://uiux.sassly.ai/ai/share-donut.md): Charts. Pie and donut charts for parts of a whole, with a legend and a total in the middle.
- [Radial Gauge](https://uiux.sassly.ai/ai/radial-gauge.md): Charts. A semicircle gauge for one value against a target, with coloured bands.
- [Radar Web](https://uiux.sassly.ai/ai/radar-web.md): Charts. Compare several measures at once on a spider chart, with two overlaid series.
- [Bubble Plot](https://uiux.sassly.ai/ai/bubble-plot.md): Charts. Scatter and bubble charts that show two measures and a size, with hover detail.
- [Conversion Funnel](https://uiux.sassly.ai/ai/conversion-funnel.md): Charts. Steps from first visit to purchase, with the drop-off between each.
- [Heat Calendar](https://uiux.sassly.ai/ai/heat-calendar.md): Charts. Daily activity across months as coloured squares.
- [Tile Map](https://uiux.sassly.ai/ai/tile-map.md): Charts. A treemap of nested categories, each tile sized by its value.
- [Lead Score](https://uiux.sassly.ai/ai/lead-score.md): CRM. A score from 0 to 100 with the signals behind it and how it changed this week.
- [Deal Card](https://uiux.sassly.ai/ai/deal-card.md): CRM. An opportunity with its stage, value, chance to close, next step and owner.
- [Contact Peek](https://uiux.sassly.ai/ai/contact-peek.md): CRM. A hover card with a contact’s details, recent activity and quick actions.
- [Score Survey](https://uiux.sassly.ai/ai/score-survey.md): CRM. A short satisfaction or 0 to 10 survey with a follow-up question.
- [Guardrail Notice](https://uiux.sassly.ai/ai/guardrail-notice.md): Agents. Explains when an agent stopped itself, why, and what a person can do next.
- [Escalation Banner](https://uiux.sassly.ai/ai/escalation-banner.md): Agents. Hands a conversation from an agent to a person, with the context attached.
- [Cash Keypad](https://uiux.sassly.ai/ai/cash-keypad.md): Commerce. Enter cash amounts fast, with quick notes and the change worked out.
- [Order Ticket](https://uiux.sassly.ai/ai/order-ticket.md): Commerce. A kitchen ticket with items, modifiers, notes and how long it has waited.
- [Receipt Slip](https://uiux.sassly.ai/ai/receipt-slip.md): Commerce. A printable receipt with items, tax, payment and a QR code.
- [Split Bill](https://uiux.sassly.ai/ai/split-bill.md): Commerce. Split a bill by people, by items or evenly, with each share shown.
- [Modifier Sheet](https://uiux.sassly.ai/ai/modifier-sheet.md): Commerce. Choose a product’s size, extras and notes before adding it to the cart.
- [Shift Close](https://uiux.sassly.ai/ai/shift-close.md): Commerce. Count the cash drawer, compare it with sales and close the shift.
- [Card Preview](https://uiux.sassly.ai/ai/card-preview.md): Commerce. A payment card preview that flips to the back for the security code.
- [Batch Expiry](https://uiux.sassly.ai/ai/batch-expiry.md): Inventory. Lots and their expiry dates, soonest first, with what to move or discount.
- [People Card](https://uiux.sassly.ai/ai/people-card.md): People. An employee’s photo, role, team, status and contact on one card.
- [Slide Rail](https://uiux.sassly.ai/ai/slide-rail.md): Media. A carousel of cards or images with snap, arrows and dots.

## Motion

- [Focus Fade](https://uiux.sassly.ai/ai/focus-fade.md): Text. Swap words, numbers or panels through a short blur instead of a hard cut.
- [Digit Roll](https://uiux.sassly.ai/ai/digit-roll.md): Numbers. Numbers that roll digit by digit to their new value.
- [Glint Placeholder](https://uiux.sassly.ai/ai/glint-placeholder.md): Loading. Loading placeholders with a light sweep, shaped like the content to come.
- [Rising Headline](https://uiux.sassly.ai/ai/rising-headline.md): Text. A headline that rises in word by word out of a soft blur.
- [Depth Card](https://uiux.sassly.ai/ai/depth-card.md): Surface. A card that tilts toward the pointer, with a highlight that follows it.
- [Pointer Dots](https://uiux.sassly.ai/ai/pointer-dots.md): Background. A dotted backdrop that brightens around the pointer.

## Blocks

- [Price Tiers](https://uiux.sassly.ai/ai/price-tiers.md): Marketing. Plans side by side with a monthly and yearly switch.
- [Numbers Panel](https://uiux.sassly.ai/ai/numbers-panel.md): Dashboard. A row of KPIs and a chart that share one date range.
- [Brand Ribbon](https://uiux.sassly.ai/ai/brand-ribbon.md): Marketing. A slow, endless row of customer logos that pauses on hover.
- [Stage Columns](https://uiux.sassly.ai/ai/stage-columns.md): Workspace. Cards in columns you can drag between, with counts that update.
- [Answer Folds](https://uiux.sassly.ai/ai/answer-folds.md): Marketing. Common questions in two columns that open smoothly, one at a time.
- [Team Conversations](https://uiux.sassly.ai/ai/team-conversations.md): Workspace. A team inbox: the conversation list, the chat thread and the customer details.

## Templates

- [Product Frame](https://uiux.sassly.ai/ai/product-frame.md): Shell. The product shell every Sassly screen starts from: navigation, top bar and content.
- [Case Workspace](https://uiux.sassly.ai/ai/case-workspace.md): Support. One ticket in full: the conversation, internal notes, SLA timer and properties.
- [Case Index](https://uiux.sassly.ai/ai/case-index.md): Support. Every ticket in one table, with saved views, filters, bulk actions and a quick preview.
- [Checkout Counter](https://uiux.sassly.ai/ai/checkout-counter.md): Commerce. A point-of-sale screen: product grid, cart, payment and receipt.
- [Floor Display](https://uiux.sassly.ai/ai/floor-display.md): Operations. A big-screen view of the support floor: queues, wait times, SLA and agents.
- [Service Overview](https://uiux.sassly.ai/ai/service-overview.md): Analytics. Team performance at a glance: volume, response times, satisfaction and top agents.
- [Contact Dossier](https://uiux.sassly.ai/ai/contact-dossier.md): CRM. Everything about one customer: details, orders, conversations and notes.
- [Blast Planner](https://uiux.sassly.ai/ai/blast-planner.md): Marketing. Write a WhatsApp broadcast, choose the audience, preview it on a phone and send it gradually.
- [Login Screen](https://uiux.sassly.ai/ai/login-screen.md): Account. Sign in with Google or an email code, then pick a workspace.
- [Table Floor](https://uiux.sassly.ai/ai/table-floor.md): Hospitality. A restaurant floor plan with tables by zone, live status, seats, timers and quick actions.
- [Stock Room](https://uiux.sassly.ai/ai/stock-room.md): Inventory. An inventory overview: stock levels, low-stock alerts, movements and purchase orders.

## Optional

- [Full text of every card](https://uiux.sassly.ai/llms-full.txt)
- [Machine-readable catalog](https://uiux.sassly.ai/ai/index.json)
- [Claude Code skill](https://uiux.sassly.ai/ai/skill/SKILL.md)