CustomersPro
A full customer list with segment tabs, search, faceted filters, column options, bulk actions and pagination. Clicking a row opens the customer in a sheet with balances, invoices and activity.
npx prodular-ui add customersBlocks
Complete screens built only from Prodular UI components. Install one, then change it like any other code in your app.
Application
Open full screen
DashboardPro
A finance overview inside the app shell: KPI strip with sparklines, revenue against the previous period, one AI insight, recent invoices and an activity feed.
npx prodular-ui add dashboardNotificationsPro
A notification center inside the app shell: tabs for mentions, approvals, agents and system events, grouped by day, with inline approve, reply and mark read. AI written items carry the AI mark, and the bell in the header opens a compact popover version.
npx prodular-ui add notificationsOnboardingPro
A focused setup flow: a stepper across four steps, the current step's form in one card and a checklist rail with progress and a person to ask for help.
npx prodular-ui add onboardingAI
Agent inboxPro
Everything Relay's background agents are doing: runs grouped by needs review, running, failed and done, with filters and bulk approval for low risk items. Selecting a run shows its approval, the proposed change and the step by step timeline.
npx prodular-ui add agent-inboxApprovals queuePro
Human in the loop at scale: every action your agents propose, grouped by risk. Selecting one shows the request with a before and after, parameters, the agent's reasoning, confidence and sources. Bulk approve low risk work, review with J, K, A and R, and keep an audit trail of every decision.
npx prodular-ui add approvals-queueAssistantPro
A full Relay Analyst workspace: conversations grouped by day with search, a thread with reasoning, tool calls, a streamed answer with a table and citations, a composer with model picker and attachments, and a generated reconciliation report with versions in a side panel.
npx prodular-ui add assistantCopilot panelPro
An AI assistant docked to the right of a normal app screen. It knows what is on screen, offers suggestions for that view, answers with citations that highlight the rows they point to, proposes actions through an approval, and minimizes to a rail.
npx prodular-ui add copilot-panelKnowledge sourcesPro
What the AI assistant and agents can read: connected sources with sync status, document counts and errors, an upload area with indexing progress, per source access for people and agents, and a test box that answers from the sources with citations.
npx prodular-ui add knowledge-sourcesSettings
AI settingsPro
Workspace AI controls for admins: one switch for all AI, per feature on and off with a default model, the data sources AI may read, training and retention, agent approval rules by risk and an audit log of AI actions.
npx prodular-ui add ai-settingsSettingsPro
Workspace settings with a secondary section nav: a general form, members with an invite dialog, billing and usage, notifications, API keys, security and a danger zone, separated by dividers.
npx prodular-ui add settingsTeam and rolesPro
Members with inline role changes, an invite dialog with email chips and a role picker, pending invites, seats with SSO and SCIM status, and a roles and permissions matrix with custom roles.
npx prodular-ui add team-rolesAI usage and billingPro
AI credits for the workspace: the balance with a segmented meter, top-up and auto top-up, spend limits with alerts, daily usage by feature, usage by member, agent and model, and invoices.
npx prodular-ui add usage-billingAuthentication
Sign inPro
A split sign-in screen: email and password, single sign-on and magic link options on the left, a calm product visual built from real components and a customer quote on the right.
npx prodular-ui add sign-inSign upPro
A three step sign up: work email and name, a 6 digit email code, then the workspace name, URL, team size and role. A live preview of the new workspace on the right fills in as people type.
npx prodular-ui add sign-upMarketing
About pagePro
An about page: the mission as the title, stats that count up, the story as a short timeline, three working principles, the team, investors and a hiring call to action.
npx prodular-ui add about-pageChangelog pagePro
Release notes as a page: a title with an RSS link, entries with a date and version that stay in view, tags, a live picture of the change, the story and smaller fixes, then an email signup.
npx prodular-ui add changelog-pageSaaS landingPro
A full landing page built from the marketing sections: navbar, hero with a live product frame, logo marquee, feature grid, an AI bento, stats that count up, testimonials, pricing, FAQ, a closing call to action and the footer.
npx prodular-ui add landingAI product landingPro
A landing page for an AI agent: a hero where the agent works a ticket live, with tool calls and an approval, a three step setup, feature rows with real tool calls, an approval and cited answers, stats, safety guardrails, a testimonial, FAQ and a closing call to action.
npx prodular-ui add landing-aiPricingPro
A pricing page with three tiers and a monthly or yearly toggle, a full feature comparison grouped by category and an FAQ.
npx prodular-ui add pricingPricing pagePro
A full pricing page on the marketing sections: plans with a monthly or yearly switch and a comparison table, logos, a savings estimate with two sliders, a testimonial, billing FAQ and a closing call to action.
npx prodular-ui add pricing-page