# Dashral

> Accessible React components for dashboards, with live examples, API docs and a shadcn registry — and a free Next.js admin dashboard template built with them.

Built with Next.js, React 19, TypeScript, Tailwind CSS v4 and Radix UI. The components, the free blocks and the free dashboard are MIT licensed; Dashral Pro (its dashboards, apps and blocks) is a one-time commercial license. Every component is a shadcn registry item: `npx shadcn@latest add https://dashral.com/r/<name>.json`.

## Components

- [Accordion](https://dashral.com/components/accordion.md): Vertically stacked sections that expand to reveal content.
- [Alert](https://dashral.com/components/alert.md): A callout that draws attention to important information.
- [Alert Dialog](https://dashral.com/components/alert-dialog.md): A question that has to be answered before anything else: Cancel, or confirm what can't be undone.
- [Approval Card](https://dashral.com/components/approval-card.md): An AI assistant asking before it acts: what it wants to do, exactly what that means, and Approve or Deny.
- [Avatar](https://dashral.com/components/avatar.md): An image element with a fallback for representing a user, and a group that stacks several.
- [Badge](https://dashral.com/components/badge.md): A small label for statuses, counts and categories.
- [Bar List](https://dashral.com/components/bar-list.md): Values side by side as labelled bars: top products, traffic sources, storage by type.
- [Breadcrumb](https://dashral.com/components/breadcrumb.md): Shows where a page sits in the site's hierarchy, with links back up to each level.
- [Button](https://dashral.com/components/button.md): Triggers an action. Sixteen variants — solid, soft, outline, ghost and link — four sizes, each with a square one for an icon alone, a loading state, and can render as a link.
- [Calendar](https://dashral.com/components/calendar.md): A date grid for picking a day or a range, built on DayPicker.
- [Area Chart](https://dashral.com/components/area-chart.md): Values over time as filled areas: one series, several, or stacked into a total, with a dashed one for a comparison. Plain SVG.
- [Bar Chart](https://dashral.com/components/bar-chart.md): Values compared across categories or periods as bars: one series, several side by side, or stacked. Plain SVG.
- [Candlestick Chart](https://dashral.com/components/candlestick-chart.md): Prices over time as candles, like a trading chart: open, high, low and close per period, with volume. Plain SVG.
- [Card](https://dashral.com/components/card.md): A container that groups related content and actions — from simple panels to image-rich product, article and profile cards.
- [Carousel](https://dashral.com/components/carousel.md): Slides in a row to swipe or step through, with arrows, dots, looping and autoplay.
- [Checkbox](https://dashral.com/components/checkbox.md): A control that toggles between checked and unchecked.
- [Combobox](https://dashral.com/components/combobox.md): A searchable select — type to filter a long list of options.
- [Command](https://dashral.com/components/command.md): A fast, filterable command menu — inline or as a ⌘K palette.
- [Context Menu](https://dashral.com/components/context-menu.md): A menu that opens on right-click or long-press, with shortcuts, checkboxes, radio items and submenus.
- [Conversation](https://dashral.com/components/conversation.md): The scrolling part of a chat with an AI assistant: it follows the newest message while it streams, inside a panel that keeps its height.
- [Copy Button](https://dashral.com/components/copy-button.md): Copies a value in one tag: an icon button with a tooltip, or a button with a label, that turns into a check and says "Copied".
- [Data Table](https://dashral.com/components/data-table.md): A full-featured table built on TanStack Table v9: search, faceted filters, sorting, column visibility, row selection, pagination and CSV or Excel export.
- [Date Picker](https://dashral.com/components/date-picker.md): A button that opens a calendar in a popover.
- [Date Range Picker](https://dashral.com/components/date-range-picker.md): Pick a start and end day on a two-month calendar, or from shortcuts like “Last 7 days”.
- [Dialog](https://dashral.com/components/dialog.md): A modal window that focuses the user on a single task.
- [Donut Chart](https://dashral.com/components/donut-chart.md): Parts of a whole as a ring, with a legend of every value and share. Plain SVG, no chart library.
- [Dropdown Menu](https://dashral.com/components/dropdown-menu.md): A menu of actions or options, opened by a button.
- [Empty State](https://dashral.com/components/empty-state.md): What a page, list or table shows when there's nothing in it yet — and the next step to take.
- [File Dropzone](https://dashral.com/components/file-dropzone.md): Drop files or browse for them, with type, size and count checks and a list of what was picked.
- [Gauge](https://dashral.com/components/gauge.md): One value within a range as a half ring — a score, a quota or a target. A meter for assistive technology.
- [Heatmap](https://dashral.com/components/heatmap.md): Activity per day as a calendar grid of weeks, like a contribution graph. Plain SVG.
- [Hover Card](https://dashral.com/components/hover-card.md): A preview that opens when a pointer rests on a link — a person, a ticket, a page.
- [Field](https://dashral.com/components/field.md): A label, a hint and an error around a form control, with the ids and aria attributes wired up.
- [Input](https://dashral.com/components/input.md): A text field for forms and search.
- [Input OTP](https://dashral.com/components/input-otp.md): A one-time code in boxes, one character each: typed, pasted or filled from a text message.
- [Kbd](https://dashral.com/components/kbd.md): A key or a shortcut as on a keyboard: ⌘ K on a Mac, Ctrl K elsewhere, read out as words.
- [Message](https://dashral.com/components/message.md): One message in a conversation with an AI assistant, with a cursor while it streams and Copy, Regenerate and feedback under it.
- [Metric Card](https://dashral.com/components/metric-card.md): One number that matters, with its change against a past period and room for a sparkline.
- [Multi Select](https://dashral.com/components/multi-select.md): Pick several options from a searchable list; the picks show as removable chips.
- [Native Select](https://dashral.com/components/native-select.md): A styled native <select> — fully accessible and mobile-friendly.
- [Note](https://dashral.com/components/note.md): An aside in the flow of a page: a tip or a caveat on a calm card, with a breath of its color in the corner.
- [Number Input](https://dashral.com/components/number-input.md): A number field with − / + steppers, arrow-key steps, limits and locale formatting — and MoneyInput for amounts.
- [Pagination](https://dashral.com/components/pagination.md): Page navigation with previous/next links and ellipsis gaps.
- [Popover](https://dashral.com/components/popover.md): Rich content in a floating panel, anchored to a trigger.
- [Progress](https://dashral.com/components/progress.md): Shows how far a task has progressed.
- [Prompt Composer](https://dashral.com/components/prompt-composer.md): Where a message to an AI assistant is written: it grows as you type, takes files, and turns send into stop while the reply streams.
- [Prompt Suggestions](https://dashral.com/components/prompt-suggestions.md): Things to ask in an empty AI conversation: chips, one scrolling row, or cards with an icon and a line.
- [Radio Group](https://dashral.com/components/radio-group.md): A set of options where only one can be selected.
- [Reasoning](https://dashral.com/components/reasoning.md): What an AI model thought before it answered, folded under one line: "Thinking…" while it works, then how long it took.
- [Resizable](https://dashral.com/components/resizable.md): Panels whose sizes you change by dragging the handle between them, or with the keyboard.
- [Scroll Shadow](https://dashral.com/components/scroll-shadow.md): A scroll area whose edges fade while there's more to see, instead of a scrollbar.
- [Segmented Control](https://dashral.com/components/segmented-control.md): A row of options where one is picked, like a view switcher. The highlight slides to the choice.
- [Select](https://dashral.com/components/select.md): A custom dropdown for choosing one option from a list.
- [Separator](https://dashral.com/components/separator.md): Visually separates content, horizontally or vertically.
- [Sheet](https://dashral.com/components/sheet.md): A panel that slides in from the edge of the screen.
- [Sidebar](https://dashral.com/components/sidebar.md): An app's side navigation: groups of links, sections that open, a sliding current-page highlight, and a collapse to icons.
- [Skeleton](https://dashral.com/components/skeleton.md): A placeholder shown while content is loading.
- [Slider](https://dashral.com/components/slider.md): Pick a value or a range by dragging a thumb.
- [Sparkline](https://dashral.com/components/sparkline.md): A tiny line, area or bar chart without axes, for a trend next to a number or in a table cell.
- [Spinner](https://dashral.com/components/spinner.md): An animated indicator for loading states.
- [Steps](https://dashral.com/components/steps.md): Shows progress through a multi-step flow.
- [Switch](https://dashral.com/components/switch.md): A toggle for on/off settings.
- [Table](https://dashral.com/components/table.md): A responsive table for tabular data.
- [Tabs](https://dashral.com/components/tabs.md): Switch between related views without leaving the page.
- [Tag Input](https://dashral.com/components/tag-input.md): Type free-text tags; Enter or a comma adds one, and pasting a list adds them all.
- [Line Chart](https://dashral.com/components/line-chart.md): Values over time as lines, with dashed ones for a target or last year; the axis fits the values so changes show. Plain SVG.
- [Marquee](https://dashral.com/components/marquee.md): Items that scroll on their own and loop without a seam: logos, testimonials, integrations, a news or price ticker — sideways or up.
- [Text Reveal](https://dashral.com/components/text-reveal.md): Text that arrives word by word as it scrolls into view: blurring in, rising from a line, fading or wiped in.
- [Textarea](https://dashral.com/components/textarea.md): A multi-line text field that grows with its content.
- [Time Picker](https://dashral.com/components/time-picker.md): A time picked from a list of steps or typed exactly, shown the locale's way, stored as HH:MM.
- [Timeline](https://dashral.com/components/timeline.md): A vertical list of events in chronological order.
- [Toast](https://dashral.com/components/toast.md): Brief, non-blocking notifications. Powered by Sonner.
- [Toggle](https://dashral.com/components/toggle.md): A button that stays pressed: Bold, Pin, Mute.
- [Toggle Group](https://dashral.com/components/toggle-group.md): A set of toggles: one at a time, like text alignment, or any of them, like Bold, Italic, Underline.
- [Tool Activity](https://dashral.com/components/tool-activity.md): The tools an AI assistant used to get its answer, step by step: their status, how long they took, and their input and output.
- [Tooltip](https://dashral.com/components/tooltip.md): A short hint shown on hover or keyboard focus.
- [Treemap](https://dashral.com/components/treemap.md): Parts of a whole as rectangles sized by value, with groups you can zoom into.
- [Tree View](https://dashral.com/components/tree-view.md): Nested items that open and close: files, categories or permissions.

## Motion

- [Button (Motion)](https://dashral.com/components/button/motion.md) (`https://dashral.com/r/motion-button.json`): Button with motion: it presses in on a spring, a new label crosses over while the button glides to its new width, and loading pops the spinner in.
- [Tabs (Motion)](https://dashral.com/components/tabs/motion.md) (`https://dashral.com/r/motion-tabs.json`): Tabs with motion: the picked tab's card springs to the one you pick, a soft highlight glides after the pointer, the new panel slides in from that side while the height glides, and swipeable panels follow your finger.
- [Switch (Motion)](https://dashral.com/components/switch/motion.md) (`https://dashral.com/r/motion-switch.json`): Switch with motion: the thumb springs across and stretches while you hold it, follows a drag (over past the middle, a rubber band past an end), and phones buzz as it switches.
- [Accordion (Motion)](https://dashral.com/components/accordion/motion.md) (`https://dashral.com/r/motion-accordion.json`): Accordion with motion: a section opens and closes on a spring, what's inside rises a little as it fades in, and the chevron turns with the panel as far as it has opened.
- [Checkbox (Motion)](https://dashral.com/components/checkbox/motion.md) (`https://dashral.com/r/motion-checkbox.json`): Checkbox with motion: the tick draws itself along its stroke as it's checked and back out as it's cleared, and the box presses in on a spring.
- [Dialog (Motion)](https://dashral.com/components/dialog/motion.md) (`https://dashral.com/r/motion-dialog.json`): Dialog with motion: it grows out of the button that opened it, shrinks back into it as it closes, glides to a new height when its content changes, and swipes down to close on a phone.
- [Tooltip (Motion)](https://dashral.com/components/tooltip/motion.md) (`https://dashral.com/r/motion-tooltip.json`): Tooltip with motion: it springs out of its trigger from the side it opens on, and when its words change it glides to their width as they rise in.
- [Input (Motion)](https://dashral.com/components/input/motion.md) (`https://dashral.com/r/motion-input.json`): Input with motion: a short shake when it turns invalid, and its error message grows in under the box and folds away when it's fixed.
- [Textarea (Motion)](https://dashral.com/components/textarea/motion.md) (`https://dashral.com/r/motion-textarea.json`): Textarea with motion: it glides taller with each new line and back down when cleared, and shakes when it turns invalid while its error grows in.
- [Segmented Control (Motion)](https://dashral.com/components/segmented-control/motion.md) (`https://dashral.com/r/motion-segmented-control.json`): SegmentedControl with motion: the picked option's card springs to the one you pick, a soft highlight follows the pointer, and options press in while held.
- [Radio Group (Motion)](https://dashral.com/components/radio-group/motion.md) (`https://dashral.com/r/motion-radio-group.json`): RadioGroup with motion: the dot springs into the radio you pick and shrinks out of the one you left, and with cards the picked frame glides from card to card.
- [Badge (Motion)](https://dashral.com/components/badge/motion.md) (`https://dashral.com/r/motion-badge.json`): Badge with motion: a new count rolls up or down while the badge glides to its width, a new color pulses the dot, and it pops in when added.
- [Toast (Motion)](https://dashral.com/components/toast/motion.md) (`https://dashral.com/r/motion-toast.json`): Toast with motion: toasts spring in and the stack glides to make room, a changing toast pops its icon over, and a swipe sends one away.
- [Number Input (Motion)](https://dashral.com/components/number-input/motion.md) (`https://dashral.com/r/motion-number-input.json`): NumberInput with motion: odometer digits that spin as far as the number travelled, steppers that repeat when held, and a limit you can feel: the number strains against it, harder with each push.
- [Slider (Motion)](https://dashral.com/components/slider/motion.md) (`https://dashral.com/r/motion-slider.json`): Slider with motion: a rubber-band stretch past the ends, a strain from the keyboard, and the value on odometer wheels in a bubble that leans as you drag.
- [Dropdown Menu (Motion)](https://dashral.com/components/dropdown-menu/motion.md) (`https://dashral.com/r/motion-dropdown-menu.json`): DropdownMenu with motion: it springs out of its trigger, its items rise in one after another, and one highlight glides from item to item after the pointer or the arrow keys.
- [Select (Motion)](https://dashral.com/components/select/motion.md) (`https://dashral.com/r/motion-select.json`): Select with motion: the list springs out of its trigger with its options rising in, one highlight glides between them, and a new value rises into the trigger.
- [Popover (Motion)](https://dashral.com/components/popover/motion.md) (`https://dashral.com/r/motion-popover.json`): Popover with motion: it springs out of its trigger from the side it opens on, and glides to its new height when what's inside changes.
- [Progress (Motion)](https://dashral.com/components/progress/motion.md) (`https://dashral.com/r/motion-progress.json`): Progress with motion: the bar glides to each value on a spring, runs while the length is unknown, shines when it's done, and can show its percentage on odometer wheels.
- [Sidebar (Motion)](https://dashral.com/components/sidebar/motion.md) (`https://dashral.com/r/motion-sidebar.json`): Sidebar with motion: it springs its width as it folds, the current page's highlight and the hover glide from row to row, and sections open on a gliding height.
- [Alert Dialog (Motion)](https://dashral.com/components/alert-dialog/motion.md) (`https://dashral.com/r/motion-alert-dialog.json`): AlertDialog with motion: it grows out of its button, its icon pops in, a click outside shakes it because it needs an answer, and confirm can be a press-and-hold.
- [Input OTP (Motion)](https://dashral.com/components/input-otp/motion.md) (`https://dashral.com/r/motion-input-otp.json`): InputOTP with motion: each character pops into its box, the focus glides from box to box, an error shakes the row and a full code ripples.
- [Time Picker (Motion)](https://dashral.com/components/time-picker/motion.md) (`https://dashral.com/r/motion-time-picker.json`): TimePicker with motion: the list springs out of its trigger, one highlight glides over the times, the tick draws, and a new time rises into the trigger.
- [Toggle (Motion)](https://dashral.com/components/toggle/motion.md) (`https://dashral.com/r/motion-toggle.json`): Toggle with motion: it presses in, its background pops in from the middle and its icon bounces as it turns on.
- [Toggle Group (Motion)](https://dashral.com/components/toggle-group/motion.md) (`https://dashral.com/r/motion-toggle-group.json`): ToggleGroup with motion: with type="single" one background springs between the toggles; with "multiple" each pops in and out.
- [Kbd (Motion)](https://dashral.com/components/kbd/motion.md) (`https://dashral.com/r/motion-kbd.json`): Kbd with motion: its keys press in as you hold the real ones on your keyboard.

## Blocks

- [AI assistant](https://dashral.com/blocks/ai-assistant.md) (`https://dashral.com/r/ai-assistant.json`): A whole assistant screen: starter cards, reasoning, tool calls, an approval before it emails anyone, and a streamed answer, with past conversations beside it.
- [Dashboard header](https://dashral.com/blocks/dashboard-header.md) (`https://dashral.com/r/dashboard-header.json`): A sidebar toggle and breadcrumb, ⌘K search, notifications and the account menu.
- [Workspace header](https://dashral.com/blocks/workspace-header.md) (`https://dashral.com/r/workspace-header.json`): A workspace switcher, the section's tabs underneath, and help, notifications and the account menu.
- [Report header](https://dashral.com/blocks/report-header.md) (`https://dashral.com/r/report-header.json`): A report's title with its live status, a period switcher, a date range, compare and export.
- [Website header](https://dashral.com/blocks/website-header.md) (`https://dashral.com/r/website-header.json`): A marketing navbar: a product menu with descriptions, sign in and sign up, and a menu sheet on phones.
- [Pill header](https://dashral.com/blocks/pill-header.md) (`https://dashral.com/r/pill-header.json`): The links in a pill in the middle with a sliding highlight, a GitHub star count, the theme, sign in and the main action.
- [Centered hero](https://dashral.com/blocks/hero-centered.md) (`https://dashral.com/r/hero-centered.json`): An announcement, a big promise and two actions, centered on a glow with a faint grid, and the customers below.
- [Split hero](https://dashral.com/blocks/hero-split.md) (`https://dashral.com/r/hero-split.json`): The promise and three reasons beside the product itself: a live dashboard in a browser frame.
- [Sign-up hero](https://dashral.com/blocks/hero-signup.md) (`https://dashral.com/r/hero-signup.json`): An email field that checks, works and confirms, the people already in, and a customer's words.
- [Stats hero](https://dashral.com/blocks/hero-stats.md) (`https://dashral.com/r/hero-stats.json`): The promise and actions, then three numbers that count up, each with its trend.
- [Dashboard sidebar](https://dashral.com/blocks/dashboard-sidebar.md) (`https://dashral.com/r/dashboard-sidebar.json`): Grouped pages with counts, a section that opens, a plan card and the account menu; collapses to a rail of icons.
- [Workspace sidebar](https://dashral.com/blocks/workspace-sidebar.md) (`https://dashral.com/r/workspace-sidebar.json`): A workspace switcher, search, inbox, and Favorites and Projects that fold away; each project opens to its views.
- [Settings sidebar](https://dashral.com/blocks/settings-sidebar.md) (`https://dashral.com/r/settings-sidebar.json`): Grouped settings with a sliding highlight and the picked section beside them; a select on phones.
- [Stats cards](https://dashral.com/blocks/stats-cards.md) (`https://dashral.com/r/stats-cards.json`): Four numbers with their change and trend that count up, and a period switch that moves all of them.
- [Revenue chart](https://dashral.com/blocks/revenue-chart.md) (`https://dashral.com/r/revenue-chart.json`): Bars for this period and a dashed line for the last, a tooltip on hover or the arrow keys, in plain SVG.
- [Orders table](https://dashral.com/blocks/orders-table.md) (`https://dashral.com/r/orders-table.json`): Search, payment and fulfillment filters, export and pages; ship selected orders and the rows update in place.
- [Getting started](https://dashral.com/blocks/onboarding-checklist.md) (`https://dashral.com/r/onboarding-checklist.json`): Steps to a working setup with progress and time left; the next step unfolds, and finishing celebrates.
- [CTA banner](https://dashral.com/blocks/cta-banner.md) (`https://dashral.com/r/cta-banner.json`): The simplest ask: one banner with a gradient hairline around a soft tint, the promise on one side and two actions on the other.
- [CTA centered](https://dashral.com/blocks/cta-centered.md) (`https://dashral.com/r/cta-centered.json`): The promise and two actions on a soft glow, with what's included and the people already using it.
- [CTA with sign-up](https://dashral.com/blocks/cta-signup.md) (`https://dashral.com/r/cta-signup.json`): Start the sign-up right there: an email field that checks the address and turns into “check your inbox”, beside the product.
- [404 page](https://dashral.com/blocks/not-found.md) (`https://dashral.com/r/not-found.json`): Page not found, with a search across the pages people likely wanted, a way back and home, popular pages and a report link.
- [Simple footer](https://dashral.com/blocks/simple-footer.md) (`https://dashral.com/r/simple-footer.json`): The logo, the main links and social accounts, then the copyright, legal links and a live system status.
- [Columns footer](https://dashral.com/blocks/columns-footer.md) (`https://dashral.com/r/columns-footer.json`): Four columns of links, a newsletter sign-up that checks and confirms, and a language select and theme switch.
- [CTA footer](https://dashral.com/blocks/cta-footer.md) (`https://dashral.com/r/cta-footer.json`): A last call to action on a soft glow with the reassurance under it, then the links and the copyright.
- [Features grid](https://dashral.com/blocks/features-grid.md) (`https://dashral.com/r/features-grid.json`): Six features with an icon, a title and one sentence each, in three columns, then two, then one.
- [Features bento](https://dashral.com/blocks/features-bento.md) (`https://dashral.com/r/features-bento.json`): Tiles of two sizes, each showing the feature in miniature: a live chart, the team, sources and an alert switch.
- [Pricing tiers](https://dashral.com/blocks/pricing-tiers.md) (`https://dashral.com/r/pricing-tiers.json`): Three plans with a monthly/yearly switch and the saving, the popular plan raised, and what each includes.
- [Pricing comparison](https://dashral.com/blocks/pricing-comparison.md) (`https://dashral.com/r/pricing-comparison.json`): Plans compared feature by feature in groups, with hints, the popular column tinted, and actions in the header.
- [Testimonials grid](https://dashral.com/blocks/testimonials-grid.md) (`https://dashral.com/r/testimonials-grid.json`): A masonry wall of quotes with stars and who said them, in three columns, then two, then one.
- [Featured testimonial](https://dashral.com/blocks/testimonial-featured.md) (`https://dashral.com/r/testimonial-featured.json`): One large story at a time with the number it changed, arrows and dots, and the customers' logos below.
- [FAQ split](https://dashral.com/blocks/faq-split.md) (`https://dashral.com/r/faq-split.json`): The heading and a contact card beside an accordion of answers; stacks on phones.
- [FAQ grid](https://dashral.com/blocks/faq-grid.md) (`https://dashral.com/r/faq-grid.json`): Short answers in two columns to scan without clicking, and a line to the help center.
- [Sign in](https://dashral.com/blocks/sign-in.md) (`https://dashral.com/r/sign-in.json`): Google and GitHub, or email and password with Forgot password, remember me, loading and a wrong-password error.
- [Sign up, split](https://dashral.com/blocks/sign-up-split.md) (`https://dashral.com/r/sign-up-split.json`): The form with a password strength meter and terms beside a soft blue panel: what you get, the product in miniature, a customer's words.
- [Command palette header](https://dashral.com/blocks/command-header.md) (Dashral Pro): A header whose search is a command palette: fuzzy matches lit up, a preview of the row you're on, scopes, recent searches, and actions with menus of their own.
- [Product hero](https://dashral.com/blocks/hero-product.md) (Dashral Pro): A headline whose ending changes, above an app window that tours itself: numbers count up, live events stream in, a summary writes itself. Pauses under the pointer.
- [App shell](https://dashral.com/blocks/app-shell.md) (Dashral Pro): A whole app layout: drag the sidebar's edge to resize it or snap it to a rail, ⌘K to jump anywhere, favorites you drag to reorder, recent pages and a sliding highlight.
- [Analytics overview](https://dashral.com/blocks/analytics-overview.md) (Dashral Pro): A whole analytics page: who's online, numbers that pick what the chart shows, the period before, and pages, sources and countries.
- [Analytics panels](https://dashral.com/blocks/analytics-panels.md) (Dashral Pro): An analytics overview on inset cards: traffic you switch by metric with a line that follows the pointer, cache, countries, status codes, threats and top paths, all moving with the range.
- [Kanban board](https://dashral.com/blocks/kanban-board.md) (Dashral Pro): Drag cards between columns with a line where they land, work-in-progress limits, a filter by person and quick add.
- [Billing settings](https://dashral.com/blocks/billing-settings.md) (Dashral Pro): The plan with dialogs to change or cancel it, usage that warns near its limits, the card on file and invoices.
- [Invoice](https://dashral.com/blocks/invoice-detail.md) (Dashral Pro): The invoice beside its history: send it, record a payment in full or in part, mark it paid or void it, and print it.
- [Inbox](https://dashral.com/blocks/inbox.md) (Dashral Pro): Conversations beside the open one: search, unread and archived, pin or mute; write with an emoji or a file and see when it's read.
- [Notifications](https://dashral.com/blocks/notifications-center.md) (Dashral Pro): Notifications by day, filtered by unread or type, each with its action right there: approve, accept, retry or reply; undo a dismissal and pick what's emailed.
- [Team members](https://dashral.com/blocks/team-members.md) (Dashral Pro): The team and the invitations still out: invite several people with a role, change roles in place, suspend or remove someone, and resend or revoke an invite.
- [CTA with ROI calculator](https://dashral.com/blocks/cta-roi.md) (Dashral Pro): Team size, report hours, an hour's cost and the tools you'd retire in; the yearly saving, the return and the payback out, adding up line by line.
- [Status & maintenance](https://dashral.com/blocks/status-page.md) (Dashral Pro): The overall state, an incident with its updates, 90 days of uptime per service you can hover, maintenance counting down, subscribing by email, team chat or webhook, and a maintenance page with a countdown.
- [Mega footer](https://dashral.com/blocks/mega-footer.md) (Dashral Pro): A newsletter that confirms, what's new on an inset card, five columns that fold on phones, a live status with uptime, the language, a theme switch and a fading wordmark.
- [Feature tour](https://dashral.com/blocks/feature-tour.md) (Dashral Pro): Features that play: the open one fills a line, then the next; beside it a product screen shows it working — sources connecting, a dashboard arranging itself, alerts arriving, a team joining.
- [Data pipeline](https://dashral.com/blocks/data-pipeline.md) (Dashral Pro): Records flowing live from three sources through one transform to every destination: raw dots go in, come out as solid squares and go to one, some or all outputs at their own pace, cards lighting up with live counts, the ring quickens as it works, and the count climbs; slows under the pointer, pauses, and stacks on phones.
- [Agent pipeline](https://dashral.com/blocks/agent-pipeline.md) (Dashral Pro): An AI agent at work, live: a question is typed and sent, the agent calls its tools one at a time (each spins, then shows what it found), and the answer streams in token by token; slows under the pointer, pauses, and stacks on phones.
- [Integrations hub](https://dashral.com/blocks/integrations-hub.md) (Dashral Pro): Your app in the middle of eight tools on an orbit, data moving both ways: syncs come in as dots, pushes go out as squares, and the count climbs; one tool connects as you watch, its link drawing in. Tooltips, a lit link on hover, pause, and icons only on phones.
- [Request flow](https://dashral.com/blocks/request-flow.md) (Dashral Pro): Requests passing browser, edge, auth, API and database, each stage lighting as one pauses there; auth turns some away in red, the rest come back as responses, and a log lists the latest with method, status and time. Pauses, and stacks on phones.
- [Payment flow](https://dashral.com/blocks/payment-flow.md) (Dashral Pro): Payments from checkout through the processor, a declined card going round a smart retry before it goes through, and each paid one landing on the invoice, receipt and ledger at its own pace; live counts on every card and the day's total climbing. Pauses, and stacks on phones.
- [Deploy pipeline](https://dashral.com/blocks/deploy-pipeline.md) (Dashral Pro): Commits running down build, test, preview and production: each stage fills its bar and says how far it is, the build turns a commit into an artifact, failing tests stop about one deploy in six in red, production shows the version going up, and a strip of green and red bars keeps the history. Pauses, and stacks on phones.
- [Global network](https://dashral.com/blocks/global-network.md) (Dashral Pro): A dotted world map with edge regions and an origin: requests arc from everywhere on land to the nearest region, most answered from its cache, the rest fetched from the origin first; each region shows its latency live, and the requests a second, cache hits and median latency tick under the map. Pauses, and fits any width.
- [Network globe](https://dashral.com/blocks/network-globe.md) (Dashral Pro): A dotted globe turning slowly, arcs rising between nine cities above its surface, each city pulsing as one lands and its label riding along with a live latency; drag it to look around, and it swings on, then carries on turning. Beside it the network's numbers. Pauses, and stacks on phones.
- [Notification fan-out](https://dashral.com/blocks/notification-fanout.md) (Dashral Pro): One event fanning out to email, push, SMS, team chat and webhooks by each person's preferences, every channel at its own pace; a text that fails is retried in amber before it lands, channels count what they deliver, and the latest notifications stack up as they arrive. Pauses, and stacks on phones.
- [Approval workflow](https://dashral.com/blocks/approval-workflow.md) (Dashral Pro): A purchase request going round its approvers one at a time: a chip carries it from person to person, a ring fills round each avatar as they review and turns green as they approve; Finance sometimes sends it back in amber to be updated, Legal is only asked above $10k, and the purchase order goes out at the end. Pauses, and stacks on phones.
- [Pricing calculator](https://dashral.com/blocks/pricing-calculator.md) (Dashral Pro): Slide to the team size and pick a plan, add-ons, billing and currency: the quote adds up line by line, with volume discounts, and the total counts to its new value.
- [Marquee wall](https://dashral.com/blocks/marquee-wall.md) (Dashral Pro): Two rows of stories scrolling in opposite directions — quotes, results in numbers and posts on inset cards — that stop under the pointer; each opens its case study.
- [Help center](https://dashral.com/blocks/help-center.md) (Dashral Pro): A search across every question and answer with your words lit up, categories with counts, answers that ask whether they helped, and support right there when nothing matches.
- [Onboarding](https://dashral.com/blocks/onboarding.md) (Dashral Pro): Five steps beside a progress rail: an account with live password rules, a 6-digit code, a workspace whose address is checked as you type, invites, and a dashboard to start from.

## Templates

- [Classic dashboard](https://dashral.com/templates/classic-dashboard): An overview with charts, a file manager, settings, pricing, sign-in and sign-up, and error pages, inside a sidebar layout with search, notifications, a theme customizer and three languages. Free, and yours to change. Pages: Overview, Files, Settings, Pricing, Sign in, Sign up, 404, 500, Maintenance, Upgrade page.
- [Inset dashboard](https://dashral.com/templates/inset-dashboard): The sidebar and header share one quiet surface and the page sits on a rounded panel inside it, in black and white. Recurring revenue, customers, invoices, activity, reports, the team, billing, API keys and integrations on inset and panel cards. In the same repository as Classic: switch between them from the header. Pages: Overview, Customers, Invoices, Activity, Reports, Team, Billing, API keys, Integrations, Settings, Pricing.

## Start a project

Clone https://github.com/hasralgana/dashral, run `pnpm install`, then `pnpm dashral init` once: it keeps Classic, Inset or both, the demo pages or a blank page, three languages or English, and writes the app's name and look. Every answer is a flag: `--template classic|inset|both --pages demo|blank --languages all|en --customizer keep|remove --name "Acme" --primary indigo --card soft`. Later, `pnpm dashral update` brings in a new release and keeps what init removed removed.

## Registry

- [Registry index](https://dashral.com/r/registry.json): every item with its dependencies
- [Theme](https://dashral.com/r/dashral-theme.json): the full Dashral color theme for light and dark mode

## Links

- [Live demo](https://demo.dashral.com)
- [Source code](https://github.com/hasralgana/dashral)