# WunderUI

> A React component library and design system: 201 components in
> 6 groups, built on Base UI and Tailwind CSS v4. Dashboards, data
> grids, boards and AI chat included.

- Package: `@wunderui/react@0.1.0`
- Install: `npm install @wunderui/react`
- Full design context: https://wunderui.com/DESIGN.md
- Structured index: https://wunderui.com/design.json

## Components

- [Accordion](https://wunderui.com/components/accordion): A vertically stacked set of collapsible panels, in card or divider style.
- [Avatar](https://wunderui.com/components/avatar): A user or entity's profile image with a text fallback.
- [Avatar Group](https://wunderui.com/components/avatar-group): A stack of overlapping avatars, with an optional overflow count.
- [Badge](https://wunderui.com/components/badge): A small status or category label in 12 colors and 6 styles.
- [Breadcrumb](https://wunderui.com/components/breadcrumb): Shows the user's location in a hierarchy, in "plain" or bordered "border" style.
- [Button](https://wunderui.com/components/button): The main action trigger, in 10 variants, 2 shapes and 5 sizes.
- [Icon Button](https://wunderui.com/components/icon-button): A square or circular button for a single icon action.
- [Button Group](https://wunderui.com/components/button-group): A row of connected buttons sharing borders and outer corners, for view switchers or segmented actions.
- [Card](https://wunderui.com/components/card): A bordered container for grouping related content.
- [Checkbox](https://wunderui.com/components/checkbox): A single choice that is on or off, with an indeterminate state for “some selected”.
- [Switch](https://wunderui.com/components/switch): A toggle control for a binary setting.
- [Radio Group](https://wunderui.com/components/radio-group): A set of mutually exclusive options.
- [Input](https://wunderui.com/components/input): A single-line text field with sm/default/lg sizes and error state.
- [Textarea](https://wunderui.com/components/textarea): A multi-line text field with sm/default/lg sizes and an optional character counter.
- [Progress](https://wunderui.com/components/progress): A horizontal bar showing completion of a task.
- [Slider](https://wunderui.com/components/slider): A draggable control for selecting one value or a range along a track.
- [Pagination](https://wunderui.com/components/pagination): Page navigation with Prev/Next and numbered pages, or a simple "Page X of Y" mode.
- [Separator](https://wunderui.com/components/separator): A thin dividing line, horizontal or vertical, solid or dashed.
- [Divider with Label](https://wunderui.com/components/divider-with-label): A separator with a centered text label, e.g. for "or" between two sign-in options.
- [Skeleton](https://wunderui.com/components/skeleton): A pulsing placeholder shown while content is loading.
- [Tooltip](https://wunderui.com/components/tooltip): A short label shown on hover, in any of 4 directions.
- [Dialog](https://wunderui.com/components/dialog): A modal window for focused tasks, built on Base UI.
- [Alert Dialog](https://wunderui.com/components/alert-dialog): A dialog for confirmations and destructive actions: a click outside does not close it, only a button or Escape does.
- [Collapsible](https://wunderui.com/components/collapsible): A single collapsible panel controlled by a trigger button.
- [Toggle](https://wunderui.com/components/toggle): A standalone two-state button that can be pressed or unpressed.
- [Meter](https://wunderui.com/components/meter): A graphical display of a fixed value within a range, e.g. disk usage.
- [Kbd](https://wunderui.com/components/kbd): Displays a keyboard key or shortcut, e.g. inside a search input.
- [Spinner](https://wunderui.com/components/spinner): A spinning indicator for an in-progress loading state.
- [Toolbar](https://wunderui.com/components/toolbar): A container for grouping a set of buttons and controls.
- [Dropdown Menu](https://wunderui.com/components/dropdown-menu): A menu of actions: icons, shortcuts, checkbox and radio entries, submenus, two-line entries, loading and empty states.
- [Hover Card](https://wunderui.com/components/hover-card): A rich preview popup shown on hovering a trigger.
- [Popover](https://wunderui.com/components/popover): A floating panel anchored to a trigger element.
- [Table](https://wunderui.com/components/table): Rows and columns with 23 ready-made cell types; for sorting and search use Data Grid.
- [Tabs](https://wunderui.com/components/tabs): Switches between related views in the same context.
- [Area Chart](https://wunderui.com/components/area-chart): A gradient-filled area chart for visualizing trends over time.
- [Bar Chart](https://wunderui.com/components/bar-chart): Compares categorical data with grouped or stacked bars.
- [Line Chart](https://wunderui.com/components/line-chart): Plots one or more series as smooth or linear lines.
- [Composed Chart](https://wunderui.com/components/composed-chart): Combines bars and a trend line in a single chart.
- [Pie Chart](https://wunderui.com/components/pie-chart): Shows proportions of a whole, with an optional donut mode.
- [Radar Chart](https://wunderui.com/components/radar-chart): Compares multiple series across shared axes on a polar grid.
- [Radial Chart](https://wunderui.com/components/radial-chart): A circular progress-style chart for a single goal value.
- [Radial Gauge](https://wunderui.com/components/radial-gauge): A half ring split into segments — shares of a whole with the legend underneath.
- [Bubble Chart](https://wunderui.com/components/bubble-chart): A scatter plot where marker size encodes a third dimension of the data.
- [Candlestick Chart](https://wunderui.com/components/candlestick-chart): An OHLC (open/high/low/close) chart for visualizing price movement over time.
- [Sparkline](https://wunderui.com/components/sparkline): A tiny trend line without axes — green when it rises, red when it falls — for table cells, price cards and metric tiles.
- [Funnel Chart](https://wunderui.com/components/funnel-chart): Shows drop-off across sequential stages, each with a label and value.
- [Column Chart](https://wunderui.com/components/column-chart): Vertical bars for comparing categories side by side.
- [Agenda](https://wunderui.com/components/agenda): A time-ordered list of scheduled events.
- [Action Bar](https://wunderui.com/components/action-bar): A floating bar of bulk actions for a selection.
- [Carousel](https://wunderui.com/components/carousel): A horizontally scrollable row of items with arrow controls.
- [Data Grid](https://wunderui.com/components/data-grid): A full-featured table: sort, search, select, resize columns, paginate.
- [Empty State](https://wunderui.com/components/empty-state): Placeholder shown when a list or search has no results.
- [File Tree](https://wunderui.com/components/file-tree): A collapsible, indented tree of folders and files.
- [Floating TOC](https://wunderui.com/components/floating-toc): A sticky table of contents with an active-section indicator.
- [Holo Card](https://wunderui.com/components/holo-card): A card with a mouse-tracking spotlight/gradient shine effect.
- [Kanban](https://wunderui.com/components/kanban): A drag-and-drop board of columns and cards.
- [Item Card](https://wunderui.com/components/item-card): A generic row card: icon, title, description, meta, action.
- [KPI](https://wunderui.com/components/kpi): A single metric with its change, as a card with a dot and delta, a plain card with a caption, or an inline value.
- [KPI Group](https://wunderui.com/components/kpi-group): A row of KPIs sharing one bordered container.
- [Metric Card](https://wunderui.com/components/metric-card): One number with its trend and, per variant, a sparkline, progress, breakdown, comparison, distribution, status, action or AI insight.
- [List View](https://wunderui.com/components/list-view): A simple bordered list of rows with leading/trailing content.
- [Timeline](https://wunderui.com/components/timeline): A vertical sequence of dated, dot-connected events.
- [Widget](https://wunderui.com/components/widget): A generic dashboard widget shell: header, body, footer.
- [App Layout](https://wunderui.com/components/app-layout): The app shell: sticky navbar and sidebar over a scrolling page, aside, banner and footer, skip link, and a drawer below 64rem.
- [Sidebar](https://wunderui.com/components/sidebar): App navigation in six modes: docked, offcanvas, icon rail, rail with flyouts, double sidebar and overlay drawer.
- [Navbar](https://wunderui.com/components/navbar): The top bar in four scroll modes — static, sticky, hide on scroll, transparent — with mega menu, search, overflow and a mobile drawer.
- [Segment](https://wunderui.com/components/segment): A pill-shaped single-select toggle group, like a compact tab bar.
- [Stepper](https://wunderui.com/components/stepper): A horizontal multi-step progress indicator with connectors.
- [Command](https://wunderui.com/components/command): A searchable command palette dialog with keyboard navigation (⌘K pattern).
- [Context Menu](https://wunderui.com/components/context-menu): Actions that open on right-click, styled like the dropdown menu.
- [Native Select](https://wunderui.com/components/native-select): A full-width styled select trigger and popup list.
- [Inline Select](https://wunderui.com/components/inline-select): A compact select meant to sit inline within a sentence of text.
- [Checkbox Button Group](https://wunderui.com/components/checkbox-button-group): A multi-select group of toggle-styled buttons.
- [Radio Button Group](https://wunderui.com/components/radio-button-group): A single-select group of toggle-styled buttons.
- [Number Stepper](https://wunderui.com/components/number-stepper): A +/- increment control for a bounded numeric value.
- [Drop Zone](https://wunderui.com/components/drop-zone): A drag-and-drop file upload target with a click-to-browse fallback.
- [Rich Text Editor](https://wunderui.com/components/rich-text-editor): A Tiptap-powered WYSIWYG editor with a formatting toolbar.
- [Color Picker](https://wunderui.com/components/color-picker): Pick a colour: saturation and brightness, hue, opacity, eyedropper, HEX/RGB/HSL values and saved colours — inline or from a trigger field.
- [Cell Color Picker](https://wunderui.com/components/cell-color-picker): A compact color swatch picker for inline use in a Data Grid cell.
- [Cell Slider](https://wunderui.com/components/cell-slider): A compact progress/value slider for inline use in a Data Grid cell.
- [Cell Select](https://wunderui.com/components/cell-select): A compact select for inline use in a Data Grid cell.
- [Cell Switch](https://wunderui.com/components/cell-switch): A compact switch for inline use in a Data Grid cell.
- [Selector Item](https://wunderui.com/components/selector-item): A list row pairing a leading icon/avatar and label/description with a trailing radio, checkbox, or switch.
- [Label](https://wunderui.com/components/label): An accessible label for a form control.
- [Field](https://wunderui.com/components/field): Labelling and validation for a single form control — label, description, and error message.
- [Fieldset](https://wunderui.com/components/fieldset): A native fieldset with a legend, for grouping related fields.
- [Form](https://wunderui.com/components/form): A form wrapper that simplifies validation and submission.
- [Input Group](https://wunderui.com/components/input-group): Groups an input with leading/trailing addons — icons, buttons, or text.
- [Number Field](https://wunderui.com/components/number-field): A numeric input with increment/decrement buttons.
- [OTP Field](https://wunderui.com/components/otp-field): A segmented input for one-time passwords and verification codes.
- [Combobox](https://wunderui.com/components/combobox): An input combined with a filterable list of predefined items to select.
- [Autocomplete](https://wunderui.com/components/autocomplete): An input that suggests options as you type.
- [Calendar](https://wunderui.com/components/calendar): A month-grid date picker with single or range selection.
- [Date Picker](https://wunderui.com/components/date-picker): A Calendar inside a Popover, with Cancel/Apply actions.
- [Chat Message](https://wunderui.com/components/chat-message): A single message bubble on the indigo tint, aligned right for the user and left for the assistant.
- [Chat Message Actions](https://wunderui.com/components/chat-message-actions): Copy / retry / thumbs up-down actions shown under an assistant message.
- [Chat Loader](https://wunderui.com/components/chat-loader): A bouncing-dots indicator shown while the assistant is composing a reply.
- [Chat Attachment](https://wunderui.com/components/chat-attachment): A file chip attached to a chat message, with an optional remove button.
- [Chat Source](https://wunderui.com/components/chat-source): A citation chip linking to a source referenced in an answer.
- [Chat Tool](https://wunderui.com/components/chat-tool): A collapsible card showing a tool/function call's name, status, and result.
- [Chain of Thought](https://wunderui.com/components/chain-of-thought): A collapsible list of the model's intermediate reasoning steps.
- [Code Block](https://wunderui.com/components/code-block): A syntax-styled code block with a language label and copy button.
- [Markdown](https://wunderui.com/components/markdown): Prose styling wrapper for rendered markdown/HTML assistant output.
- [Prompt Input](https://wunderui.com/components/prompt-input): An auto-resizing chat input with attach and send buttons.
- [Prompt Suggestion](https://wunderui.com/components/prompt-suggestion): A pill-shaped suggested-prompt chip shown above an empty chat input.
- [Text Shimmer](https://wunderui.com/components/text-shimmer): A shimmering-gradient text effect for a 'thinking...' loading label.
- [Chat List View](https://wunderui.com/components/chat-list-view): A sidebar list of past conversations with preview and timestamp.
- [Agent Status](https://wunderui.com/components/agent-status): A pill showing what a run is doing right now, with a live elapsed counter.
- [Approval Card](https://wunderui.com/components/approval-card): The human-in-the-loop gate: what the agent wants to do, how risky it is, approve or reject.
- [Run Timeline](https://wunderui.com/components/run-timeline): Every step of a run in order, with duration, tokens and expandable input/output.
- [Cost Meter](https://wunderui.com/components/cost-meter): Spend against budget for a run, a day or a month — amber at 80%, red when it is gone.
- [Run Error](https://wunderui.com/components/run-error): A failed run: which step threw, how many attempts are left, retry or resume.
- [Agent Grid](https://wunderui.com/components/agent-grid): The fleet view — every agent, its current status and how long it has been there.
- [Plan Step](https://wunderui.com/components/plan-step): One step of an agent plan: number or status icon, title, status in words and how long it took.
- [Agent Plan](https://wunderui.com/components/agent-plan): The agent's plan as a checklist: follow it live, edit it before the run, or group it into phases.
- [Plan Summary](https://wunderui.com/components/plan-summary): A plan on one card before it runs: goal, steps, time, cost, tools and phases.
- [Activity Item](https://wunderui.com/components/activity-item): One line in a live activity stream: status, action, tool and elapsed time.
- [Log Stream](https://wunderui.com/components/log-stream): A run's log with an All or Errors filter and auto-scroll.
- [Agent Lane](https://wunderui.com/components/agent-lane): One parallel worker: its status, queue, throughput and the tasks it holds.
- [Duration Bar](https://wunderui.com/components/duration-bar): A step's share of the run as a bar, with a tick at the estimate and red when it runs over.
- [Diff View](https://wunderui.com/components/diff-view): The result of an edit tool call: file, added and removed lines, and the changed code.
- [Terminal Output](https://wunderui.com/components/terminal-output): The result of a code-execution tool call: command, exit code, run time, stdout and stderr.
- [Search Result Card](https://wunderui.com/components/search-result-card): One ranked result of a web-search tool call: source, relevance, title and snippet.
- [Tool Permission Row](https://wunderui.com/components/tool-permission-row): Whether an agent may call a tool: Allow, Ask or Deny, with the scope it covers.
- [Expiry Timer](https://wunderui.com/components/expiry-timer): Countdown until an approval or permission request lapses — amber at the end, red once expired.
- [Scope List](https://wunderui.com/components/scope-list): What an agent asks to access, one scope per row, with a countdown until the request lapses.
- [Usage Meter](https://wunderui.com/components/usage-meter): One limit as a row: what is used, what is allowed, and a warning before it runs out.
- [Context Meter](https://wunderui.com/components/context-meter): How full the model's context window is: a ring for the prompt toolbar or a bar with a breakdown.
- [Slash Command Menu](https://wunderui.com/components/slash-command-menu): The popover that opens when someone types / in the prompt: commands with a short description, filtered as they type.
- [Mention Picker](https://wunderui.com/components/mention-picker): The @ picker for adding context to a prompt: files, people and channels in groups.
- [Context Pill](https://wunderui.com/components/context-pill): A removable chip for what the prompt refers to: a file, a person, a channel or a link.
- [Prompt Mode Switch](https://wunderui.com/components/prompt-mode-switch): What the agent may do with the next prompt — answer, act or edit — with the send keys underneath.
- [Model Picker](https://wunderui.com/components/model-picker): The model chip in a prompt box: always clickable, it opens a popover to switch models.
- [Model Select](https://wunderui.com/components/model-select): Pick the model and how hard it should think, with context size and price at a glance.
- [Voice Input](https://wunderui.com/components/voice-input): Talk instead of typing: idle, listening with a live waveform and transcript, then transcribing.
- [Artifact Panel](https://wunderui.com/components/artifact-panel): The side panel for what the agent made — code or a document — with versions, copy and download.
- [Source List](https://wunderui.com/components/source-list): Numbered sources pinned to a chat; citations like [1] in answers point here.
- [Agent Avatar](https://wunderui.com/components/agent-avatar): Who is talking in a multi-agent chat: tint colour, name and role.
- [Handoff Divider](https://wunderui.com/components/handoff-divider): Marks the moment one agent passes the conversation to another.
- [Alert](https://wunderui.com/components/alert): An inline banner in 5 colors and 2 sizes, with an optional close button and action.
- [Toast](https://wunderui.com/components/toast): A temporary notification that appears in the corner of the screen, with success/error/warning/info types.
- [Pull to Refresh](https://wunderui.com/components/pull-to-refresh): Drag down from the top of any content past a threshold to trigger an async refresh, with a rotating spinner and a rubber-band release.
- [Rating](https://wunderui.com/components/rating): An interactive star rating input.
- [Number Value](https://wunderui.com/components/number-value): A large number with its change beside it: caret up or down, green or red.
- [Trend Chip](https://wunderui.com/components/trend-chip): A small pill showing a change, up or down, in seven icon styles.
- [Pressable Feedback](https://wunderui.com/components/pressable-feedback): Wraps any content with a scale-down press animation.
- [Emoji Reaction Button](https://wunderui.com/components/emoji-reaction-button): A toggleable emoji reaction with a count, like a Slack reaction.
- [Emoji Picker](https://wunderui.com/components/emoji-picker): A grid of selectable emoji, typically shown inside a Popover.
- [Sheet](https://wunderui.com/components/sheet): A panel that slides in from an edge of the screen — left, right, or bottom.
- [Resizable](https://wunderui.com/components/resizable): A two-pane layout with a draggable divider between them.
- [Scroll Area](https://wunderui.com/components/scroll-area): A scrollable container with custom, always-styled scrollbars.
- [Page Header](https://wunderui.com/components/page-header): The title row at the top of a page or section, with an optional description, buttons or a text link.
- [Keyboard Hint](https://wunderui.com/components/keyboard-hint): One or more key caps with a short label, for the shortcut legend at the bottom of a command menu.
- [Command Item Row](https://wunderui.com/components/command-item-row): One row in a command menu: an icon, a label, optional context and its shortcut keys.
- [Search Result](https://wunderui.com/components/search-result): A search hit with an icon, a title, a short excerpt and where it lives.
- [Notification Item](https://wunderui.com/components/notification-item): One entry in a notification list, with an avatar or icon, the message, optional actions and an unread dot.
- [Checklist Task](https://wunderui.com/components/checklist-task): One step of an onboarding checklist that can be ticked off, with the next step to do highlighted.
- [Project Card](https://wunderui.com/components/project-card): A clickable project tile with a colored cover, a name and a short line of detail.
- [File Card](https://wunderui.com/components/file-card): A file tile with a preview, a name and details, plus optional selection, a menu and a deleted state.
- [Status Bar](https://wunderui.com/components/status-bar): The phone status bar with the time, for the top of a mobile screen mockup.
- [Tab Item](https://wunderui.com/components/tab-item): A single underlined tab that shows a count while it is active, used inside a Tab Bar.
- [Tab Bar](https://wunderui.com/components/tab-bar): A horizontal row of underlined tabs on a bottom border that scrolls sideways when space runs out.
- [Timeline Event](https://wunderui.com/components/timeline-event): One entry in an activity feed or history, with an avatar or status dot and a line to the next entry.
- [Price](https://wunderui.com/components/price): A price with an optional billing period, a crossed-out old price and a savings badge.
- [Text Link Row](https://wunderui.com/components/text-link-row): A line of text followed by a link, like “Don't have an account? Sign up”, or a back link with an arrow.
- [Social Sign In Buttons](https://wunderui.com/components/social-sign-in-buttons): Sign-in buttons for Google, Apple, GitHub and Microsoft, side by side or stacked.
- [Option Row](https://wunderui.com/components/option-row): A selectable card with a radio button or checkbox, a title and a short description.
- [Option Row Group](https://wunderui.com/components/option-row-group): Wraps radio Option Rows so that exactly one of them is selected.
- [User Info](https://wunderui.com/components/user-info): An avatar with a name and a second line, for account menus, sidebars and quotes.
- [Password Requirement](https://wunderui.com/components/password-requirement): One password rule in a checklist that turns green once the password meets it.
- [Password Strength](https://wunderui.com/components/password-strength): A four-step meter with a label that shows how strong a password is.
- [OTP Code Input](https://wunderui.com/components/otp-code-input): Large boxes for typing a 4- or 6-digit verification code.
- [Backup Code](https://wunderui.com/components/backup-code): A recovery code that copies itself when clicked and is crossed out once it has been used.
- [Invite Row](https://wunderui.com/components/invite-row): An email field and a role picker for inviting one person, with a button to remove the row.
- [Invite Link Row](https://wunderui.com/components/invite-link-row): A read-only invite link with a copy button that confirms when the link is copied.
- [Settings Row](https://wunderui.com/components/settings-row): A setting's title and description with a switch, or any other control, on the right.
- [Inline Note](https://wunderui.com/components/inline-note): A small line of supporting text with an icon, either neutral or as a warning.
- [Auth Heading](https://wunderui.com/components/auth-heading): The title and subtitle at the top of a sign-in, sign-up or onboarding form.
- [Avatar Stack](https://wunderui.com/components/avatar-stack): Overlapping avatars with a “+N” count for everyone past the limit.
- [Kanban Card Item](https://wunderui.com/components/kanban-card-item): A task card for a Kanban board, with labels, due date, comments, checklist progress and assignees.
- [Column Header](https://wunderui.com/components/column-header): The top of a Kanban column, with a colored dot, a card count and buttons to add a card or open a menu.
- [Event Chip](https://wunderui.com/components/event-chip): A small colored event label that fits in a calendar day cell.
- [Agenda Event](https://wunderui.com/components/agenda-event): One event in an agenda list, with its start and end time, a color bar, details and guests.
- [Conversation Item](https://wunderui.com/components/conversation-item): One conversation in an inbox list, with sender, subject, preview, tags and an unread state.
- [Person Cell](https://wunderui.com/components/person-cell): An avatar with a name and role for tables and lists, with an optional capacity bar.
- [Task Row](https://wunderui.com/components/task-row): A row in a Gantt task list: either a task with its color, assignee and dates, or a group header that folds open and closed.
- [Record Card](https://wunderui.com/components/record-card): A card that stands in for a table row on small screens: who it is, a status and a few key fields.
- [Stars](https://wunderui.com/components/stars): A small, read-only row of stars that shows a rating.
- [Product Image](https://wunderui.com/components/product-image): A product photo, or a colored placeholder with an icon when there is no photo yet.
- [Product Card](https://wunderui.com/components/product-card): A shop tile with image, name, price and rating, plus optional wishlist and add-to-cart buttons.
- [Line Item](https://wunderui.com/components/line-item): One product line in a cart or order summary, with image, variant, quantity and price.
- [Product Mini Card](https://wunderui.com/components/product-mini-card): A compact product row with a quick add button, for recommendations next to a cart.
- [Checkout Steps](https://wunderui.com/components/checkout-steps): The numbered steps of a checkout, where finished steps can be clicked to go back.
- [Histogram Bar](https://wunderui.com/components/histogram-bar): One row of a rating breakdown: the star level, a filled bar and its share.
- [Review Card](https://wunderui.com/components/review-card): A customer review with author, rating, text, photos, a reply from the store and a helpful button.
- [Payment Methods](https://wunderui.com/components/payment-methods): A row of small labels for the payment methods a shop accepts.
- [Text Field](https://wunderui.com/components/text-field): A text input with a label, helper or error text, and optional icons or add-ons on either side.
- [Password Field](https://wunderui.com/components/password-field): A password input with a button to show or hide what was typed.
- [Textarea Field](https://wunderui.com/components/textarea-field): A multi-line text input with a label and helper or error text.
- [Checkbox Field](https://wunderui.com/components/checkbox-field): A checkbox with a clickable label and an optional description below it.
- [Form Actions](https://wunderui.com/components/form-actions): The row of buttons at the end of a form, aligned right, left or spread to both edges.

## Templates

- [Analytics dashboard](https://wunderui.com/templates/dashboard): KPI row, two charts, a transactions table and an activity rail — the page every internal tool starts with.
- [Settings page](https://wunderui.com/templates/settings): Profile, preferences, notifications and a danger zone, grouped into sections with real form controls.
- [AI inbox](https://wunderui.com/templates/inbox): Conversation list, threaded messages with tool calls and sources, and a prompt input that sends.
- [Agent workspace](https://wunderui.com/templates/agent-workspace): Run list, a run's timeline with an approval waiting inside it, and a context rail with sources, tools and spend.
- [Sign in](https://wunderui.com/templates/sign-in): Split authentication screen with email and password, provider buttons and a product panel.