Actual CSS

Interface blocks

Small app UI recipes used to validate that layout primitives, components, forms, and utilities compose without a new component for every surface.

Page header

Validates breadcrumb, hgroup, action lists, and responsive wrapping for common app page chrome.

  1. Projects
  2. Actual Cloud
  3. Deployments

Deployments

Review production releases, failed jobs, and pending approvals.

    •

    Compact metrics

    Validates `.grid-6` for small repeated items: two columns when narrow, three columns in medium containers, six columns when the row has room.

    Open 18
    Queued 7
    Blocked 2
    Shipped 41
    Owners 6
    SLA 99%

    Table workspace

    Validates dense operational UI: filters, table chrome, row selection, badges, truncation, flyout menus, and pagination.

    •
    Accounts needing review
    Select Account Owner ARR Status Next step Actions
    AM JL
    		$428K Watch Legal review
    JL Jana $216K Healthy Security call
    RM Rin $184K Blocked Sponsor call
    Showing 3 of 28 accounts

    Empty state

    Validates centered layout, short copy, and a recoverable next step without inventing an empty-state component.

    No saved views yet

    Save a filtered view to return to this work faster next time.

  • Review filters
    •

    Settings panel

    Validates field rhythm, grouped choices, switch geometry, alert messaging, and sticky form actions.

    Workspace settings

    Control defaults for reports, notifications, and release approvals.

    Two approvals are still pending. Changing deployment rules will apply to future releases.
    Notifications

    Detail layout

    Validates a common app detail page: prose-light main content, card aside, metadata, status, and action grouping.

    Incident INC-1842

    Payment webhook latency

    Webhook deliveries are delayed for a subset of enterprise accounts.

    Summary

    The integration queue started processing slowly after the last deployment. New jobs are accepted, but downstream delivery can take several minutes.

    Next response

    • Pause non-critical replay jobs.
    • Move enterprise webhooks to the priority worker.
    • Post an update after the next metrics window.

    Notification center

    Validates persistent feedback patterns and keeps transient toast messaging out of the main recommendation path.

    Deployment completed. Version 0.1.0 is live in production.
    OK
    Exports are ready

    Three CSV exports can be downloaded from the reports page.

    !
    Two invoices need review

    The tax region changed for accounts in the EU segment.

    Auth card

    Validates a small standalone form: field labels, help text, checkboxes, full-width actions, secondary navigation, and native constraint validation via `.needs-validation`.

    AC

    Sign in to Actual Cloud

    Use your workspace account to continue.

    No account yet? Request access

    Tabbed panel

    Validates in-place panel switching with real tab semantics: roving tabindex, `aria-selected`, and arrow-key navigation.

    Deployments, incidents, and review activity for this workspace at a glance.

    FAQ

    Validates collapsible content on native details/summary, grouped with the `name` attribute so only one answer stays open at a time.

    Can I use my own brand colors?

    Yes. Themes only set token values — swap the primary, surface, and text tokens without touching component CSS.

    Does this require a build step?

    No. Drop in the stylesheet and the optional runtime script; both work directly from a CDN or a static file.

    What happens after a plan is canceled?

    Data stays available in read-only mode for 30 days, then archived for another 90 before deletion.