# Nasaq > Nasaq (نسق) is a bilingual (English/Arabic, LTR/RTL) design system: --nq-* CSS tokens, brand themes and 392 components, shipped for React (Base UI), the shadcn CLI, Vue 3, Laravel Blade (Livewire, FilamentPHP) and plain HTML with Alpine.js. Install: `npx shadcn@latest add https://docs.nasaqui.com/r/nasaq.json`, then `npx shadcn@latest add https://docs.nasaqui.com/r/.json`, or `npm install @fadymondy/nasaq`. Prices in examples are USD (SAR in Arabic). An MCP server (https://mcp.nasaqui.com) serves the same manuals to AI assistants. Each link below is the page as markdown; component pages include the code for every stack. ## Get started - [What Nasaq is](https://docs.nasaqui.com/guides/introduction.md): Nasaq (نسق, Arabic for "order" or "system") is a design system for product interfaces: 392 React components, a token system, eleven brand themes and full-page templates. It is built on Base UI and Tai - [Get started](https://docs.nasaqui.com/guides/get-started.md): Nasaq is one design system for every stack. React, Vue, Blade and plain HTML all render the same markup with the same Tailwind classes, so a button, a dialog or a data table looks and behaves the same - [React (Next.js, Vite, Remix)](https://docs.nasaqui.com/guides/get-started-react.md): Install the package. It needs React 19. - [shadcn](https://docs.nasaqui.com/guides/get-started-shadcn.md): Use this when you want each component's source in your project. You need React 19, Tailwind v4 and a components.json (npx shadcn@latest init). - [Vue 3 and Nuxt](https://docs.nasaqui.com/guides/get-started-vue.md): The Vue components (NqButton, NqDialog …) are built on Reka UI and use the same Tailwind classes as the React ones. They ship in the same package. - [Laravel + Inertia (React or Vue)](https://docs.nasaqui.com/guides/get-started-inertia.md): Inertia pages are ordinary React or Vue components, so you use the JavaScript packages. Laravel only sends the props. - [Laravel, Livewire, Filament and TomatoPHP](https://docs.nasaqui.com/guides/get-started-laravel.md): Blade or Livewire layouts: add the assets in . Livewire already starts Alpine, and @nasaqScripts registers before it does. - [Plain HTML + Alpine.js](https://docs.nasaqui.com/guides/get-started-html.md): No build step: one stylesheet and one script from the CDN, then Alpine. The script registers the Nasaq components with Alpine before it starts. - [Project setup](https://docs.nasaqui.com/guides/project-setup.md): Both install routes end in the same steps: Tailwind CSS v4 with the Nasaq tokens, a provider around the app, and fonts. - [Install with the shadcn CLI](https://docs.nasaqui.com/guides/shadcn-cli.md): Nasaq is published as a shadcn registry. The CLI copies a component's source into your project, adds its dependencies and rewrites its imports to your aliases, so the code is yours to read and edit. R - [Install from npm](https://docs.nasaqui.com/guides/npm-package.md): If you would rather take a versioned dependency than copy source, install the package. Everything ships as one package, @fadymondy/nasaq, with sub-path entry points. ## Guides - [Theming and brands](https://docs.nasaqui.com/guides/theming.md): Nasaq separates what stays the same in every product (layout, type scale, states, spacing) from what makes a product itself (its brand colour, action colour, mark and typeface). A brand is the second - [The token system](https://docs.nasaqui.com/guides/tokens.md): Every colour, space, radius, type size and control height in Nasaq is a CSS custom property named --nq-. Components use these and nothing else, which is what lets one component library serve eleven br - [Dark mode](https://docs.nasaqui.com/guides/dark-mode.md): Dark mode is a full second set of semantic colours, not an inversion. Every surface, line, text and status token has a light and a dark value, defined in the token source and emitted by tokens.css. Co - [RTL and Arabic](https://docs.nasaqui.com/guides/rtl-and-arabic.md): Nasaq is built for products that ship in English and Arabic. Right-to-left is a first-class layout, tested in the same stories as left-to-right, not a separate theme. - [Accessibility](https://docs.nasaqui.com/guides/accessibility.md): Nasaq aims for WCAG 2.2 AA in the parts it controls. It gets there by building on accessible primitives, testing the things a machine can test on every change, and documenting what a caller has to sup - [The MCP server](https://docs.nasaqui.com/guides/mcp-server.md): The Nasaq MCP server lets an AI assistant (Claude Code, Claude, Cursor and any other Model Context Protocol client) work with the design system properly: list the components, find the right one for a - [Page templates](https://docs.nasaqui.com/guides/page-templates.md): Every category in the sidebar ends with a Pages folder of complete screens, each built only from Nasaq components and tokens with no page-specific CSS. They answer "what does a real settings screen, a ## Project - [Contributing](https://docs.nasaqui.com/guides/contributing.md): Nasaq is developed in the open at github.com/fadymondy/nasaq. Bug reports, fixes, accessibility findings and new components are welcome. For anything larger than a fix, open an issue first so the shap - [Changelog and versioning](https://docs.nasaqui.com/guides/changelog-and-versioning.md): This is the first public release. The components are used daily in the author's own products, but the API has not been through outside use, so treat everything as 0.x: minor versions may contain break ## Component groups - [Account components](https://docs.nasaqui.com/components/groups/account.md): 8 Account components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AccountSettings, AvatarUpload, ChangePasswordForm, NotificationPreferences, ProfileCard, ProfileForm, SettingsSections, WorkspaceSettings. - [Actions components](https://docs.nasaqui.com/components/groups/actions.md): 8 Actions components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Button, ButtonGroup, CopyButton, Page Actions, ShareButton, ThemeSwitcher, ToggleGroup, ViewToggle. - [Admin components](https://docs.nasaqui.com/components/groups/admin.md): 5 Admin components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AdminArea, AdminWorkspaces, AdminUsers, ImpersonationBanner, UserActionsMenu. - [AI Agents components](https://docs.nasaqui.com/components/groups/ai-agents.md): 9 AI Agents components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AgentPersonaEditor, Agent Steps and Confirm, AiModelPicker, AiUsageCost, BrainList, KnowledgeGaps, ModelRoutingEditor, ResearchRun, Section Board. - [AI Assistant components](https://docs.nasaqui.com/components/groups/ai.md): 11 AI Assistant components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AI Citations and Provenance, AI States, Artifact Renderer, Ask AI and Insight Card, CopilotChat, CopilotDock, CopilotProvider, ScoreExplainer, SemanticSearch, VoiceCallOverlay, WeightedCriteriaCard. - [Alerts & Notifications components](https://docs.nasaqui.com/components/groups/alerts.md): 8 Alerts & Notifications components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Alert, AlertList, AppUpdate, Attention, DesktopNotification, NotificationCenter, NotificationItem, Toaster. - [Analytics components](https://docs.nasaqui.com/components/groups/analytics.md): 9 Analytics components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BreakdownTable, BusinessReports, FunnelBuilder, FunnelChart, GeoList, GoogleAnalyticsPage, MetricTiles, RealtimeCounter, ReportFilterBar. - [Apps & Platforms components](https://docs.nasaqui.com/components/groups/platforms.md): 8 Apps & Platforms components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: ChromeExtensionInstall, DesktopIconGrid, DesktopLocations, DesktopShell, ExtensionPopup, GlanceSurfaces, InstallButton, InstallPrompt. - [Auth components](https://docs.nasaqui.com/components/groups/auth.md): 16 Auth components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AuthLayout, DesktopLoginScreen, Device pairing, ForgotPasswordForm, IdleLock, InviteAccept, LockScreen, LoginForm, OAuthButtons, OAuthConsent, RegisterForm, ResetPasswordForm, SessionExpired, SignInFlow, TwoFactorChallenge, VerifyOtpForm. - [Billing components](https://docs.nasaqui.com/components/groups/billing.md): 7 Billing components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Accounting Ledger, InvoiceList, InvoiceView, Line Item Editor, Local Payments, Rates and Subscriptions, Wallet. - [Bookings components](https://docs.nasaqui.com/components/groups/bookings.md): 8 Bookings components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AvailabilityEditor, BookingFlow, BookingManage, BookingPipeline, BookingSlots, CheckInKiosk, LobbyDisplay, WaitingScreen. - [Brand components](https://docs.nasaqui.com/components/groups/brand.md): 7 Brand components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BrandGuidelines, Brand loaders, BrandingProvider, ProductArtwork, ProductMark, Spotlight, Theme presets. - [Charts & Maps components](https://docs.nasaqui.com/components/groups/charts.md): 6 Charts & Maps components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: ChartContainer, SegmentBar, Graph view, Heatmap, Map Monitor, MapView. - [Chat components](https://docs.nasaqui.com/components/groups/chat.md): 4 Chat components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: CannedRepliesManager, ChatThread, ChatWidget, Inbox. - [Collaboration components](https://docs.nasaqui.com/components/groups/collaboration.md): 3 Collaboration components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Comment Thread, MembersManager, MentionTextarea. - [CRM components](https://docs.nasaqui.com/components/groups/crm.md): 7 CRM components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Activity Composer, ClientPortal, CompanyList, ContactIdentities, ContactList, ContactMerge, LeadsInbox. - [Data Display components](https://docs.nasaqui.com/components/groups/data-display.md): 16 Data Display components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Avatar, Badge, Carousel, CountryFlag, Data Table, EntityList, Infolist, InterimBadge, LangTag, ScreenshotFrame, SourceBadge, StatCard, Status, Table, Timeline, UsageMeter. - [Delivery components](https://docs.nasaqui.com/components/groups/delivery.md): 5 Delivery components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Cash Collect, Courier Card, Delivery Tracker, Dispatch Offer, Route Stops. - [Developer Tools components](https://docs.nasaqui.com/components/groups/developer-tools.md): 12 Developer Tools components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: ApiKeys, API reference, CodeBlock, CodeBlock variants, EnvList, FeatureFlagDetail, FeatureFlagList, GithubActivity, ProviderSwitcher, Repository picker, Terminal, Webhooks Manager. - [Editors components](https://docs.nasaqui.com/components/groups/editors.md): 10 Editors components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Content table editor, EditorTabs, EmailTemplates, LandingPageEditor, MarkdownEditor, RichMarkdown, Notes, Presentation editor, Report editor, RichTextEditor. - [Feedback SDK components](https://docs.nasaqui.com/components/groups/feedback-sdk.md): 1 Feedback SDK components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: FeedbackReporter. - [Files components](https://docs.nasaqui.com/components/groups/files.md): 6 Files components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: ExportButton, FileExplorer, FileUpload, ImportWizard, TrashBin, VersionHistory. - [Form Builders components](https://docs.nasaqui.com/components/groups/form-builders.md): 5 Form Builders components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: FormBuilder, PublicForm, Repeater, SchemaForm, SchemaRepeater. - [Forms components](https://docs.nasaqui.com/components/groups/forms.md): 21 Forms components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AddressInput, Checkbox, ChipGroup, Combobox, CountrySelect, CurrencyInput, Field, Form, InlineEdit, InputGroup, LimitsEditor, NativeSelect, OtpInput, PasswordInput, PhoneInput, RadioGroup, RelationPicker, Select, Slider, Switch, TagInput. - [Gamification components](https://docs.nasaqui.com/components/groups/gamification.md): 2 Gamification components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Gamification, Loyalty and Promo. - [Healthcare components](https://docs.nasaqui.com/components/groups/healthcare.md): 4 Healthcare components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: ClinicDashboard, ClinicQueue, ClinicSchedule, CurrentVisit. - [Integrations components](https://docs.nasaqui.com/components/groups/integrations.md): 7 Integrations components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AnalyticsConnect, ConnectedAccounts, IntegrationConnector, McpConnect, Placement Settings, Plugin Card, WhatsappQrConnect. - [Keyboard & Commands components](https://docs.nasaqui.com/components/groups/keyboard.md): 4 Keyboard & Commands components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: CommandPalette, CommandProvider, HotkeyRecorder, KeyboardShortcuts. - [Layout components](https://docs.nasaqui.com/components/groups/layout.md): 13 Layout components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Accordion, AppShell, AspectRatio, Card, Collapsible, DashboardBoard, Detail Layout, DocsShell, PageHeader, ProductShell, ResizablePanelGroup, ScrollArea, Separator. - [Loading & States components](https://docs.nasaqui.com/components/groups/feedback.md): 8 Loading & States components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: DataState, ErrorPage, ProductOnboarding, Progress, RouteProgress, Spinner, EmptyState, WsStatus. - [Marketing components](https://docs.nasaqui.com/components/groups/marketing.md): 5 Marketing components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: CampaignComposer, SocialComposer, SubscriptionLanding, TrendsFeed, YouTubeChannelPage. - [Monitoring components](https://docs.nasaqui.com/components/groups/monitoring.md): 10 Monitoring components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: ApmPage, APM panels, Error tracking, LogViewer, StatusPage, StatusPageManager, TimeSeriesPanel, UptimeMonitors, WebVitalGauge, WebVitalsPage. - [Navigation components](https://docs.nasaqui.com/components/groups/navigation.md): 13 Navigation components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Breadcrumb, IconRailSidebar, Menubar, MobileNavKit, NavigationMenu, Pagination, ProductSwitcher, SidebarCustomize, Stepper, Tabs, TreeView, UserMenu, WorkspaceSwitcher. - [Onboarding components](https://docs.nasaqui.com/components/groups/onboarding.md): 3 Onboarding components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: OnboardingChecklist, OnboardingFlow, SetupWizard. - [Overlays components](https://docs.nasaqui.com/components/groups/overlays.md): 10 Overlays components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AlertDialog, ConfirmProvider, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, Popover, Sheet, Tooltip. - [Pickers components](https://docs.nasaqui.com/components/groups/pickers.md): 8 Pickers components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Appearance pickers, Calendar, ColorPicker, DatePicker, EmojiPicker, IconPicker, Time fields, TimeRangePicker. - [Pricing components](https://docs.nasaqui.com/components/groups/pricing.md): 6 Pricing components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BundleCard, PlanCard, PlanCatalogEditor, Price, PricingTable, UpgradeDialog. - [Productivity components](https://docs.nasaqui.com/components/groups/productivity.md): 5 Productivity components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: FocusStatusChip, PomodoroCard, QuickCapture, Scheduler, TimeTracker. - [Projects & Work components](https://docs.nasaqui.com/components/groups/work.md): 8 Projects & Work components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Checklist, HR Attendance and Leave, Issue Board, Issue View, KanbanBoard, ProjectList, Project View, StatusLabelManager. - [Security components](https://docs.nasaqui.com/components/groups/security.md): 9 Security components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AccessGrants, ActiveSessions, AuditLog, CertificateMonitor, DataPrivacy, PasskeyList, TwoFactorSetup, Vault, VulnReport. - [SEO components](https://docs.nasaqui.com/components/groups/seo.md): 7 SEO components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BacklinkMonitor, KeywordPlanner, KeywordTracker, SearchConsolePage, SearchPerformanceTable, SeoPageList, SeoPreview. - [Server Tools components](https://docs.nasaqui.com/components/groups/server-tools.md): 11 Server Tools components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BackupManager, DatabaseExplorer, DeployView, DnsManagement, DomainsManager, FinOps Cost, Mail Settings, NetworkRules, ProxyHosts, Server Admin, ServerCard. - [Store Admin components](https://docs.nasaqui.com/components/groups/store-admin.md): 6 Store Admin components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: POS Register, Stock Ledger, StoreDashboard, StoreOrdersList, Store Products Admin, Store Settings. - [Storefront components](https://docs.nasaqui.com/components/groups/store.md): 14 Storefront components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Catalog store, CheckoutSteps, Marketplace, ProductCard, ProductDetail, ProductReviews, Rating, StoreOrderHistory, Store Cart, Store Checkout, Store header and footer, Store product listing, Store merchandising, StoreOrderTimeline. - [Typography components](https://docs.nasaqui.com/components/groups/typography.md): 5 Typography components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Markdown, Num, SectionHeader, Text, Text effects. - [Utilities components](https://docs.nasaqui.com/components/groups/utilities.md): 7 Utilities components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Barcode, Countdown, Hooks, Icon, QrCode, Linkify, Translations. - [Website components](https://docs.nasaqui.com/components/groups/website.md): 10 Website components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Blog index, Blog post, CookieConsent, FeatureStory, LegalPage, Marketing sections, Personal widgets, Profile page, Testimonials, TypingTerminal. - [Wellness components](https://docs.nasaqui.com/components/groups/wellness.md): 6 Wellness components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Daily Summary, Engine Card, Engine Details, Health Reports, CupTracker, Vitals. - [Workflow components](https://docs.nasaqui.com/components/groups/workflow.md): 11 Workflow components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: ApprovalQueue, CronBuilder, KillSwitch, RuleBuilder, RunHistory, StepEditor, Test Run Stream, Workflow canvas, Workflow marketplace, Workflow network, Workflow Views. ## Components: Account - [AccountSettings](https://docs.nasaqui.com/components/account-settings.md): The account settings page layout. A title, a section nav (vertical on desktop, tabs on mobile) and a content area, plus SettingsSection blocks and a DangerZone with typed delete confirmation. - [AvatarUpload](https://docs.nasaqui.com/components/avatar-upload.md): A profile photo with change, remove and a square crop editor (drag or arrow keys to pan, slider or +/- to zoom) drawn on a canvas. Pick by click, drop or paste. It hands your async callback a cropped File. - [ChangePasswordForm](https://docs.nasaqui.com/components/change-password-form.md): Change-password form with current, new (strength meter) and confirm fields, an option to sign out other sessions, client checks, server field errors and a success message, driven by one async onSubmit. - [NotificationPreferences](https://docs.nasaqui.com/components/notification-preferences.md): The notification settings screen. A matrix of kinds by channel (email, push, WhatsApp, desktop), quiet hours, a daily cap with batching, a digest schedule and extra email or webhook destinations with a test send. Every change saves at once and rolls back if it fails. - [ProfileCard](https://docs.nasaqui.com/components/profile-card.md): A person's account card (avatar, name, role, presence, local time, team, quick actions) that opens from any avatar, name or mention on hover, focus or tap, plus the mention chip and presence dot it is built from. - [ProfileForm](https://docs.nasaqui.com/components/profile-form.md): The profile settings form. Photo, display name, username with a live availability check, email with a verified badge, resend and a password-protected change, phone, bio, language and time zone, and a sticky Save / Discard bar that shows only when something changed. - [SettingsSections](https://docs.nasaqui.com/components/settings-sections.md): A settings page with grouped sections in a nav, search across every setting, and a sticky save bar that shows unsaved changes. - [WorkspaceSettings](https://docs.nasaqui.com/components/workspace-settings.md): Create and manage workspaces. A first-run onboarding page, a create dialog for the workspace switcher, a list of your workspaces, and a settings page with rename, address, picture, leave and type-to-confirm delete. ## Components: Actions - [Button](https://docs.nasaqui.com/components/button.md): The action button, with five variants, five sizes and a built-in loading state. Wraps Base UI Button. - [ButtonGroup](https://docs.nasaqui.com/components/button-group.md): Buttons joined into one control with shared borders and only the outer corners rounded, horizontal or vertical, with a separator slot for split buttons. - [CopyButton](https://docs.nasaqui.com/components/copy-button.md): Icon button that copies text to the clipboard and shows a check for 1.5 seconds, with a screen-reader announcement and a fallback; CopyField pairs it with a read-only, always left-to-right input for keys and URLs. - [Page Actions](https://docs.nasaqui.com/components/page-actions.md): The header's action area. One visible primary action, the rest behind a "More actions" menu, and all of them in the command palette with their shortcuts bound. - [ShareButton](https://docs.nasaqui.com/components/share-action.md): A share button and dialog with copy link, email invites with a role, link access of restricted or anyone with the link, link expiry, the people who already have access and the native Web Share sheet where the browser offers it. - [ThemeSwitcher](https://docs.nasaqui.com/components/switchers.md): Theme (light / dark / system) and language controls - a segmented switcher, a one-icon light/dark toggle with a click, a language dropdown, and menu-item variants for embedding in other menus. - [ToggleGroup](https://docs.nasaqui.com/components/toggle-group.md): Pressed-state buttons grouped as a segmented control, single or multiple selection, plus a standalone Toggle. - [ViewToggle](https://docs.nasaqui.com/components/view-toggle.md): Switches how a collection is shown (table, grid, board, list or calendar), with one view always pressed and optional persistence in localStorage. ## Components: Admin - [AdminArea](https://docs.nasaqui.com/components/admin-area.md): The admin frame. An icon rail plus sub-sidebar with ready-made admin navigation, an environment tag, an account button and an impersonation banner, plus AdminPage for the screen body. - [AdminWorkspaces](https://docs.nasaqui.com/components/admin-tenants.md): The tenants and plans console for an admin area. A workspaces table with seat usage, change plan, suspend and reactivate, and a plan catalogue with an edit dialog. - [AdminUsers](https://docs.nasaqui.com/components/admin-users.md): User management for an admin area. Summary tiles, a filterable users table, an add-user dialog and per-row actions to verify, disable, reset password, impersonate and edit roles. - [ImpersonationBanner](https://docs.nasaqui.com/components/impersonation-banner.md): A sticky bar that says you are viewing as another user, or previewing, with an exit button. It is a status region, pinned so it cannot scroll away, and AdminArea uses it. - [UserActionsMenu](https://docs.nasaqui.com/components/user-actions-menu.md): The admin actions for one account: edit email, roles and permissions, impersonate, set a password or send a reset link, send a sign-in link, and delete. A menu or a toolbar that owns its dialogs. ## Components: AI Agents - [AgentPersonaEditor](https://docs.nasaqui.com/components/agent-persona-editor.md): Editor for an AI agent persona with name, tagline, colour, icon, traits, model, greeting and a markdown persona with write and preview tabs, section chips, counts, save and revert. - [Agent Steps and Confirm](https://docs.nasaqui.com/components/agent-steps.md): The tool calls an agent made and a human-in-the-loop confirm before it acts. A step list with arguments, results and retry, plus a diff review with per-change ticks, risk, and Apply or Reject. - [AiModelPicker](https://docs.nasaqui.com/components/ai-model-picker.md): Choose the model, its reasoning effort and a required agent or skill, as cards or one compact toolbar row, plus a PersonaPicker with prompt starters and the compact AiModelSelect that CopilotChat uses. - [AiUsageCost](https://docs.nasaqui.com/components/ai-usage-cost.md): AI spend overview with total, token, billed, unbilled and marked-up client price tiles, a daily stacked cost chart and a by-model, product or run breakdown with token columns, plus a TokenCostMeter for one run. - [BrainList](https://docs.nasaqui.com/components/brain-list.md): Zekra-style list of AI brains as a table or cards with status, access, memory and source counts, members, tags and last activity, plus search, filters, bulk select and loading and empty states. - [KnowledgeGaps](https://docs.nasaqui.com/components/knowledge-gaps.md): Queries a knowledge base could not answer, grouped as open, indexed or dismissed, with hit counts, first and last asked, and actions to mark indexed, dismiss or reopen. - [ModelRoutingEditor](https://docs.nasaqui.com/components/model-routing-editor.md): Admin editor for AI model routing with an automatic-routing switch, a task class to model and fallback route table, an active backend switch and provider or node registration with modality chips. - [ResearchRun](https://docs.nasaqui.com/components/research-run.md): A research run with an ask box, live stage progress, an answer whose sentences cite numbered evidence, the evidence list, sources, confidence and failed or cancelled states with retry. - [Section Board](https://docs.nasaqui.com/components/section-board.md): An ordered set of sections, each generated by a prompt, a model and a few settings. View mode shows the content; edit mode reorders by drag or keyboard and edits each section in a dialog. ## Components: AI Assistant - [AI Citations and Provenance](https://docs.nasaqui.com/components/ai-citations.md): Show where an AI answer came from. Inline numbered markers that open a quote, source chips, evidence cards with the quoted passage, and a provenance line with model, latency, grounding and confidence. - [AI States](https://docs.nasaqui.com/components/ai-states.md): The states of an AI feature. Smart actions (sparkle button, split button, suggestion chips, Cmd or Ctrl J menu), loading (thinking indicator, shimmer, step labels), generating (streaming text with a caret, stop and regenerate, safe partial Markdown) and summarized (TL;DR card with key points, sources, confidence, feedback). - [Artifact Renderer](https://docs.nasaqui.com/components/artifact-renderer.md): Generative UI from a schema. Turns an agent's JSON into a card, table, chart, Markdown, code, stats, action buttons or picker, validated and safe. HTML is off by default and only shown in a sandboxed frame. - [Ask AI and Insight Card](https://docs.nasaqui.com/components/ask-ai.md): Ask AI about selected text with a popover that appears on selection, quick actions and a question box. Plus an inline AI insight card with finding, metric, reasoning, sources, confidence and next actions. - [CopilotChat](https://docs.nasaqui.com/components/copilot-chat.md): AI assistant chat with streamed Markdown answers, tool-call steps, sources, artifacts, follow-ups, context chips, file attachments, slash commands, toggles, history, a model picker and @mentions, as a side panel or a full page. - [CopilotDock](https://docs.nasaqui.com/components/copilot-dock.md): App-wide assistant: a launcher or an Ask bar that opens CopilotChat in a non-modal panel docked to either edge or the bottom, floating, or expanded to the page. Toggled with ⌘J / Ctrl+J. - [CopilotProvider](https://docs.nasaqui.com/components/copilot-provider.md): Owns a copilot conversation: streams answers from your transport, stops, retries, keeps sessions, and lets any part of the app open the assistant with useCopilot(). - [ScoreExplainer](https://docs.nasaqui.com/components/score-explainer.md): A 0 to 100 score badge that opens the reasons behind it, one line per dimension with points, source chips, an inferred mark and confidence. - [SemanticSearch](https://docs.nasaqui.com/components/semantic-search.md): Semantic memory search with a query box, mode and limit, results with facet chips, highlighted words and a score with a level word. - [VoiceCallOverlay](https://docs.nasaqui.com/components/voice-call-overlay.md): Full-screen voice call with an AI agent showing who, how long, a level-driven visualiser, the listening, thinking or speaking state, live captions and mute, captions and hang-up controls. - [WeightedCriteriaCard](https://docs.nasaqui.com/components/weighted-criteria-card.md): A human-in-the-loop step: the assistant suggests criteria, the person switches each on or off, sets its weight, adds their own and confirms. ## Components: Alerts & Notifications - [Alert](https://docs.nasaqui.com/components/alert.md): Quiet inline notice with a tone (info, success, warning, danger), optional title, description, action and dismiss. - [AlertList](https://docs.nasaqui.com/components/alerts.md): Alert triage lists, AlertList and SecurityAlerts, with status tabs and counts, search, severity and source filters, sorting, acknowledge, resolve and reopen, and an expandable timeline per alert. - [AppUpdate](https://docs.nasaqui.com/components/app-update.md): An update pill with download progress, an update sheet with release notes and speed, a forced-update gate for unsupported builds, and an admin release manager with the minimum supported build. - [Attention](https://docs.nasaqui.com/components/attention.md): A short, domain-independent list of things the user should act on now (unread conversations, failed deployments, approvals, setup steps), ordered by urgency. - [DesktopNotification](https://docs.nasaqui.com/components/desktop-notification.md): Notification cards drawn like macOS and Windows system alerts for Electron apps and previews, a corner stack with auto dismiss, and the notification permission flow with a soft ask, waiting, granted and blocked steps. - [NotificationCenter](https://docs.nasaqui.com/components/notification-center.md): Bell button with an unread badge that opens notifications in a popover or a full-height side panel, with All and Unread tabs, mark all read, a header slot and an empty state. Controlled. - [NotificationItem](https://docs.nasaqui.com/components/notification-item.md): One row of a notifications list, a full-width button with an actor avatar or icon, title, description, time and an unread marker. - [Toaster](https://docs.nasaqui.com/components/toast.md): Transient notifications. A themed, RTL-aware Sonner Toaster plus the re-exported toast() function. ## Components: Analytics - [BreakdownTable](https://docs.nasaqui.com/components/breakdown-table.md): A top-N table where each row carries a bar sized against the largest value, with share and change against the previous period. - [BusinessReports](https://docs.nasaqui.com/components/business-reports.md): Four ready made business reports, profitability by project, an employee KPI dashboard, a CRM pipeline with a chart and table toggle and support inbox statistics. Each is a section you drop into a page. - [FunnelBuilder](https://docs.nasaqui.com/components/funnel-builder.md): A form for building a funnel: name it, add steps from events or pages, reorder them and set the conversion time window. - [FunnelChart](https://docs.nasaqui.com/components/funnel-chart.md): A marketing funnel chart with stages, counts, conversion and drop-off between steps, a breakdown by source or segment, and a list of saved funnels. Bars grow from the inline start, so it reads right to left in Arabic. - [GeoList](https://docs.nasaqui.com/components/geo-list.md): Top countries with a flag, the localised country name, a bar, share and change. Built on BreakdownTable. - [GoogleAnalyticsPage](https://docs.nasaqui.com/components/google-analytics-page.md): A Google Analytics report - KPI tiles with comparison, traffic chart, live users, and tabs for sources, pages and audience, with a connect-account screen. - [MetricTiles](https://docs.nasaqui.com/components/metric-tiles.md): A row of KPI tiles, each with the change against the previous period, a sparkline and optional selection to drive a chart. - [RealtimeCounter](https://docs.nasaqui.com/components/realtime-counter.md): A live active-users card - a large count, a per-minute mini chart and ranked lists such as top pages and countries. - [ReportFilterBar](https://docs.nasaqui.com/components/report-filter-bar.md): The controls around a report, a period and filter bar that lives in the URL, saved views that can be renamed and shared, a print-ready report sheet and an export menu for PDF and Markdown. ## Components: Apps & Platforms - [ChromeExtensionInstall](https://docs.nasaqui.com/components/chrome-extension-install.md): Three-step install flow for a Chrome extension (add from the Web Store, pin, sign in) with a detected state, re-check, sign-in action and a notice for unsupported browsers. - [DesktopIconGrid](https://docs.nasaqui.com/components/desktop-icons.md): Icons on a desktop surface. An auto grid, or free placement with drag and snap. Select, open, context menu and keyboard moves, with RTL built in. - [DesktopLocations](https://docs.nasaqui.com/components/desktop-locations.md): Manage the folders a desktop app may use, such as Orchestra workspace roots. Add and remove folders, set read, write and index permissions per folder, see status and the default, plus a DesktopLocationPicker. - [DesktopShell](https://docs.nasaqui.com/components/desktop-os-shell.md): A desktop for the browser with a wallpaper, menu bar, dock, launchpad and a window manager that drags, resizes, snaps, maximises and minimises. Windows are plain data. - [ExtensionPopup](https://docs.nasaqui.com/components/extension-popup.md): Browser extension surfaces, a popup with connect and pair, mini status cards, a pause switch and quick actions, plus an options page with a save bar. - [GlanceSurfaces](https://docs.nasaqui.com/components/glance-surfaces.md): Glanceable surfaces, a tray or menu-bar popover, watch rows, home and lock-screen widget tiles and a widget gallery with a size picker. - [InstallButton](https://docs.nasaqui.com/components/install-button.md): The install call to action for an app; controlled through four states, with built-in English and Arabic labels, and a quiet "Open" once installed. - [InstallPrompt](https://docs.nasaqui.com/components/install-prompt.md): A PWA install dialog with a hook for the browser's install event and an iPhone walkthrough, plus a per-device push opt-in that reuses the notification permission prompt and lists subscribed devices. ## Components: Auth - [AuthLayout](https://docs.nasaqui.com/components/auth-layout.md): Page shell for sign-in and sign-up screens: a centred card or a split layout with a brand panel, a heading, and a footer slot. - [DesktopLoginScreen](https://docs.nasaqui.com/components/desktop-login-screen.md): A desktop OS sign-in screen. Wallpaper, a clock with a greeting, and a card with the mark and the Nasaq LoginForm, plus optional power buttons. - [Device pairing](https://docs.nasaqui.com/components/device-pairing.md): Approve a device by code with its claims, IP and platform; show an OAuth device-code with a big copyable code and link; and hand a browser sign-in to a native app. - [ForgotPasswordForm](https://docs.nasaqui.com/components/forgot-password-form.md): Request a password reset link by email, then a Check your inbox state with a resend countdown and a change-email link; en and ar built in. - [IdleLock](https://docs.nasaqui.com/components/idle-lock.md): Locks the app after a period of inactivity: a Still there countdown dialog first, then your LockScreen over the inert app. - [InviteAccept](https://docs.nasaqui.com/components/invite-accept.md): The public accept-invitation page. It covers a valid invitation with accept and decline or sign in first, an expired one, one sent to another account, one already used and one that was cancelled. - [LockScreen](https://docs.nasaqui.com/components/lock-screen.md): OS-style lock screen over a wallpaper with a clock. Unlock by PIN keypad, password with an optional authenticator code, or biometrics, with a lockout after wrong tries and a quiet-mode gate. - [LoginForm](https://docs.nasaqui.com/components/login-form.md): Presentational sign-in form with email and password, magic link, remember me, provider buttons, passkey and a dev-only shortcut, built-in en and ar strings, linked errors and focus on the first invalid field. - [OAuthButtons](https://docs.nasaqui.com/components/oauth-buttons.md): Provider sign-in buttons for Google, GitHub, Apple and Microsoft with their official logos, stacked, in a grid or icon-only, with per-provider loading. - [OAuthConsent](https://docs.nasaqui.com/components/oauth-consent.md): Authorization screen for a third-party app: app identity, signed-in account, requested scopes with sensitive badges, Allow and Deny, and the redirect host. - [RegisterForm](https://docs.nasaqui.com/components/register-form.md): Presentational sign-up form with name, email, password with strength meter, confirmation, terms consent and provider buttons; en and ar built in. - [ResetPasswordForm](https://docs.nasaqui.com/components/reset-password-form.md): Choose a new password with a confirmation field, strength meter and optional policy checklist, then a Password changed or Link expired screen; en and ar built in. - [SessionExpired](https://docs.nasaqui.com/components/session-expired.md): Re-authentication form for a session that ended: the same person, a password (and code) or a passkey away, with switch account and sign out. - [SignInFlow](https://docs.nasaqui.com/components/sign-in-flow.md): Identifier-first sign-in: the email and the providers first, then the step your backend picks for that address (password, one-time code, sign-in link, SSO, sign-up or blocked), with two-factor and forgot password in place. - [TwoFactorChallenge](https://docs.nasaqui.com/components/two-factor-challenge.md): Second-factor step at sign-in: authenticator code or recovery code, trust this device, and a passkey alternative; en and ar built in. - [VerifyOtpForm](https://docs.nasaqui.com/components/verify-otp-form.md): Verify an emailed or texted one-time code with auto-submit on the last digit, wrong-code clear and refocus, a masked destination and a resend countdown. ## Components: Billing - [Accounting Ledger](https://docs.nasaqui.com/components/accounting-ledger.md): A chart of accounts, a balanced journal-entry editor, a trial balance and an account statement, in exact integer money. - [InvoiceList](https://docs.nasaqui.com/components/invoice-list.md): Invoices and payments tables with summary tiles, status filters, search, pagination and per-row download. - [InvoiceView](https://docs.nasaqui.com/components/invoice-view.md): A printable invoice document with parties, line items, tax, discount, payments and balance, plus download, print and pay actions. - [Line Item Editor](https://docs.nasaqui.com/components/line-item-editor.md): Editable invoice or quote lines with a product picker that fills name, price and tax, free lines, quantity, discount and exact integer totals. - [Local Payments](https://docs.nasaqui.com/components/local-payments.md): Manual payment methods such as InstaPay, mobile wallets and bank transfer with copy-ready details, a receipt upload and a verification state. - [Rates and Subscriptions](https://docs.nasaqui.com/components/rates-subscriptions.md): Effective-dated bill and cost rates, per-project recurring subscriptions with month-end clamping, and an organisation billing overview. - [Wallet](https://docs.nasaqui.com/components/wallet.md): A balance card with top-up and withdraw dialogs and a grouped transaction list, all amounts through Intl. ## Components: Bookings - [AvailabilityEditor](https://docs.nasaqui.com/components/availability-editor.md): Weekly hours per day with breaks, copy to other days, and vacations picked as date ranges, with overlap and range checks that block saving. - [BookingFlow](https://docs.nasaqui.com/components/booking-flow.md): Online booking flow with branch, service, doctor with ratings, day and time grid, guest or signed-in details, notes and files, payment choice, review and a QR ticket confirmation. - [BookingManage](https://docs.nasaqui.com/components/booking-manage.md): A patient's own booking page - QR ticket with code, add to calendar, reschedule in a dialog and cancel with the late fee stated, all following a cancel and reschedule policy. - [BookingPipeline](https://docs.nasaqui.com/components/booking-pipeline.md): Staff status pipeline for a booking - requested, confirmed, checked in, in visit and done, with next-action buttons, confirm on no-show and cancel, and a timeline of every move. - [BookingSlots](https://docs.nasaqui.com/components/booking-slots.md): Day calendar beside a grid of time tiles grouped by morning, afternoon and evening, with available, full and held states, a legend and a jump to the next free day. - [CheckInKiosk](https://docs.nasaqui.com/components/check-in-kiosk.md): Self check-in kiosk - scan or type a booking code, or enter a phone number on a big keypad, find the booking, and print a queue ticket with a QR and an auto reset. - [LobbyDisplay](https://docs.nasaqui.com/components/lobby-display.md): Large-screen now-serving board with one card per room, up next and recent calls, a clock, and a chime plus flash for each new call, sized from its own width. - [WaitingScreen](https://docs.nasaqui.com/components/waiting-screen.md): Patient waiting screen with ticket, position, estimated wait, now serving, room, a live connection indicator and a called state, driven by pure queue math. ## Components: Brand - [BrandGuidelines](https://docs.nasaqui.com/components/brand-guidelines.md): A brand guidelines page with downloadable marks on light and dark grounds, copyable palette swatches, typography, do and dont rules and social cards. It shows only assets that are passed in or already in the repo. - [Brand loaders](https://docs.nasaqui.com/components/brand-loaders.md): Loading states with a brand feel: a braille spinner, a benday dot-matrix progress fill, a loader that animates around a supplied logo, and a full-screen boot splash with an honest failure state. - [BrandingProvider](https://docs.nasaqui.com/components/branding-provider.md): Applies a tenant's brand colours at runtime from data (an org's settings, a white-label customer) over the active brand manifest, with readable on-brand text, a derived dark step and the tenant logo and name shared through useBranding. - [ProductArtwork](https://docs.nasaqui.com/components/product-artwork.md): A product's official mark on a gradient field of its own brand colour, plus AppGlyph, a line-icon tile for modules that have no mark. - [ProductMark](https://docs.nasaqui.com/components/product-mark.md): The official cube-lattice mark of a Nasaq brand, drawn from its MarkSpec, and ProductLogo (mark plus typeset name). - [Spotlight](https://docs.nasaqui.com/components/spotlight.md): Featured-product banner on the product's own artwork field, with mark, name, pitch and call to action; scopes the product's brand so one primary button takes its colour. - [Theme presets](https://docs.nasaqui.com/components/theme-presets.md): Named themes (light or dark plus brand colours): Nasaq, purple, rose and emerald, each dark and light. A picker with live previews, useThemePreset to apply and remember the choice, overrides for tenant colours, and ThemePresetScope to preview a region. ## Components: Charts & Maps - [ChartContainer](https://docs.nasaqui.com/components/chart.md): Themed Recharts wrapper (shadcn style) with token colours, a Nasaq-formatted tooltip and legend, RTL axis helpers, plus tiny Sparkline and MiniBar for table cells and cards. - [SegmentBar](https://docs.nasaqui.com/components/chart-extras.md): Small charts that Recharts does not give you, a proportion bar with a legend of values, a progress ring, a centred funnel with step conversion and a table-row trend cell with a sparkline or mini bar. - [Graph view](https://docs.nasaqui.com/components/graph-view.md): One knowledge graph in four views, a live force-directed graph with draggable shaped nodes, a schema of columns with connectors, a card grid and a sortable list, with shared search, type filters and a node inspector. - [Heatmap](https://docs.nasaqui.com/components/heatmap.md): GitHub-style contribution grid. One cell per day, one column per week, five intensity levels of a token colour, a tooltip per day and a legend. Time runs right to left in RTL. - [Map Monitor](https://docs.nasaqui.com/components/map-monitor.md): A map for watching live events. Region presets jump between places, a time-range filter narrows to recent events, and an alerts panel lists them by severity in step with the pins. - [MapView](https://docs.nasaqui.com/components/map-view.md): A map of pins and routes without a map library, with layer toggles, a legend, zoom and pan by drag, wheel, buttons or keyboard, a location card and pin clustering; tiles come from a URL template you provide, and without one it draws a coordinate grid. ## Components: Chat - [CannedRepliesManager](https://docs.nasaqui.com/components/canned-replies.md): The library behind a reply composer's slash menu, with search, add, edit, duplicate and delete, variable buttons, a live preview and validation of duplicate shortcuts. - [ChatThread](https://docs.nasaqui.com/components/chat.md): Chat UI kit. A bottom-sticking message thread, messages with avatar, time, status and streaming, and an autosizing composer. - [ChatWidget](https://docs.nasaqui.com/components/chat-widget.md): Floating customer chat for a website with a launcher and unread badge, a chat panel with greeting, quick questions, messages, typing and file attachments, and an offline leave-a-message form, driven by async callbacks. - [Inbox](https://docs.nasaqui.com/components/inbox.md): Unified inbox for chat, email and WhatsApp with a filterable conversation list, thread, composer, contact panel, assignment, snooze, find in thread, voice notes, location sharing, saved replies, reactions, a docked chat launcher and live new message toasts, driven by callbacks. ## Components: Collaboration - [Comment Thread](https://docs.nasaqui.com/components/comment-thread.md): Threaded comments with one reply level, mention chips, badges for agents and clients, a review badge for pending comments and a sign-in prompt. - [MembersManager](https://docs.nasaqui.com/components/members-manager.md): Members and roles of a workspace. A searchable table with an inline role select limited to the roles you can grant, an invite by email dialog, pending invites with resend and revoke, transfer of ownership and leave, with the last owner protected. - [MentionTextarea](https://docs.nasaqui.com/components/mention-textarea.md): Textarea that suggests people at the caret when you type @ (or another trigger) and reports the text plus a mentions array. ## Components: CRM - [Activity Composer](https://docs.nasaqui.com/components/activity-composer.md): Log a note, call, meeting or task, then read the history with open tasks first. Tasks tick off in place. - [ClientPortal](https://docs.nasaqui.com/components/client-portal.md): What a customer sees of their project. A progress ring and hours against the budget, a read-only board, requests with a form, hours per week, sent invoices and an activity feed. - [CompanyList](https://docs.nasaqui.com/components/company-list.md): A list of companies as a table or cards with logo, domain, industry, location, contacts count, tags, owner and last activity, plus search, industry and tag and owner filters, bulk select, loading skeletons and an empty state. - [ContactIdentities](https://docs.nasaqui.com/components/contact-identities.md): Every account one contact is reachable on (email, phone, WhatsApp, social) with a primary per channel, a link form that rejects duplicates, and a consent switch per channel. - [ContactList](https://docs.nasaqui.com/components/contact-list.md): A list of contacts as a table or cards with avatar, company, stage, tags, owner and last activity, plus search, stage and tag and owner filters, bulk select, loading skeletons and an empty state. - [ContactMerge](https://docs.nasaqui.com/components/contact-merge.md): Merge duplicate contacts by choosing a survivor, then choosing which value wins for every field that differs, with a live result summary and a confirmation step. - [LeadsInbox](https://docs.nasaqui.com/components/leads-inbox.md): Inquiries from your forms with where each came from (UTM, referrer, Google click id), a stage pipeline with counts, a detail panel with reply and canned replies, and conversion into a CRM contact. ## Components: Data Display - [Avatar](https://docs.nasaqui.com/components/avatar.md): Person or workspace image with an initials fallback, in four sizes and circle or square shapes. - [Badge](https://docs.nasaqui.com/components/badge.md): Small chip for a status, brand or accent label, or a user-defined tag in one of nine hues. - [Carousel](https://docs.nasaqui.com/components/carousel.md): Swipeable slide carousel on Embla. Previous/next buttons, dots, direction-aware keyboard arrows, optional autoplay that respects reduced motion. Everything mirrors in RTL. - [CountryFlag](https://docs.nasaqui.com/components/country-flag.md): A country's flag as an SVG (3:2, one line of text tall) from its ISO code. Looks the same on every platform, including Windows, where flag emoji do not render. - [Data Table](https://docs.nasaqui.com/components/data-table.md): The interactive layer on top of Table. A useDataTable hook plus opt-in pieces for sorting (multi-column), search, facet and range filters, column visibility, pinning and resizing, expandable rows, selection with bulk actions, row actions, keyboard navigation, pagination with page sizes, and loading, empty and error states. - [EntityList](https://docs.nasaqui.com/components/entity-list.md): A list of records shown as a DataTable or as a grid of cards with a view toggle, search, multi-value facet filters, bulk select, row actions, loading skeletons, an error state and an empty state. The base for ContactList, CompanyList and ProjectList. - [Infolist](https://docs.nasaqui.com/components/infolist.md): A read-only description list for a record's detail page, turning enum and boolean values into badges, with links, copy buttons, sections, and a column layout. - [InterimBadge](https://docs.nasaqui.com/components/interim-badge.md): Marks content that is partial and still arriving: a streamed answer, a total before every source has reported, a draft figure. An outlined badge with a spinner and a word. - [LangTag](https://docs.nasaqui.com/components/lang-tag.md): The language of a piece of content (not of the interface): a small coloured code tag beside a title, message or document, read aloud as the language's full name. - [ScreenshotFrame](https://docs.nasaqui.com/components/screenshot-frame.md): Frames a product screenshot as a window, browser or phone in neutral greys; with a label it becomes one accessible image. - [SourceBadge](https://docs.nasaqui.com/components/source-badge.md): Where a record came from (a plugin, an integration, a feed) as a small icon-and-name chip, with an icon-only compact form, a brand-coloured icon and an optional external link. - [StatCard](https://docs.nasaqui.com/components/stat-card.md): KPI tile with a label, a large tabular figure, a good/bad delta, an optional sparkline and icon, a loading skeleton, and a responsive StatGrid. - [Status](https://docs.nasaqui.com/components/status.md): Inline status, an icon plus a label with no container; each of five tones has its own icon shape so it reads without colour. - [Table](https://docs.nasaqui.com/components/table.md): Styled primitives for a native HTML table (rows, heads, cells, caption, footer) inside a horizontally scrolling container. No sorting, selection or pagination. - [Timeline](https://docs.nasaqui.com/components/timeline.md): Vertical list of events with a rail on the inline-start side, an icon or avatar marker, title, description and relative time. - [UsageMeter](https://docs.nasaqui.com/components/usage-meter.md): A quantity used against its limit (count, money or hours) with warning and danger thresholds, an unlimited state, budget burn with a pace projection, and a plan usage panel with an overage estimate strip. ## Components: Delivery - [Cash Collect](https://docs.nasaqui.com/components/cash-collect.md): A cash-on-delivery panel - order total plus delivery fee minus prepaid, the amount received, and live short, exact or change-due feedback, with quick amounts and confirm. - [Courier Card](https://docs.nasaqui.com/components/courier-card.md): A courier row for dispatch screens - avatar, availability, vehicle, distance and ETA from the pickup, cash float and active orders, with a selectable list wrapper. - [Delivery Tracker](https://docs.nasaqui.com/components/delivery-tracker.md): A customer-facing order tracker - five delivery steps with times, an ETA, the courier with call and message actions, a map slot, and cancelled or failed outcomes. - [Dispatch Offer](https://docs.nasaqui.com/components/dispatch-offer.md): A courier-side job offer with pickup and drop-off, fee, cash to collect, distance, ETA and a ring that counts down to expiry, with accept and decline. - [Route Stops](https://docs.nasaqui.com/components/route-stops.md): An ordered multi-order trip - pickups and drop-offs with done, current and failed states, cash per stop, a trip summary and a per-stop action slot. ## Components: Developer Tools - [ApiKeys](https://docs.nasaqui.com/components/api-keys.md): API key management with a create form (name, scopes, expiry), a one-time secret reveal with copy, a masked list with scopes and last used, and confirmed rotate and revoke, driven by async callbacks. - [API reference](https://docs.nasaqui.com/components/api-reference.md): A reference page for API endpoints or MCP tools with scope, minimum role, an arguments table, an example call and result, and a card catalog of all tools. - [CodeBlock](https://docs.nasaqui.com/components/code-block.md): Syntax-highlighted code with filename header, line numbers, highlighted lines and a copy button; Shiki loads lazily. Also InlineCode. - [CodeBlock variants](https://docs.nasaqui.com/components/code-block-variants.md): Code in tabs (pnpm npm yarn, curl JS Python), a copy menu for AI assistants, and a one-line command with a direct copy button. Composes CodeBlock. - [EnvList](https://docs.nasaqui.com/components/env-list.md): A .env manager with masked values, reveal and copy, add edit delete, import by pasting a .env, export, per-environment tabs and key validation. - [FeatureFlagDetail](https://docs.nasaqui.com/components/feature-flag-detail.md): One feature flag in full: on/off and percentage rollout per environment, targeting rules built with the rule builder, weighted variants, a kill switch and the audit history. - [FeatureFlagList](https://docs.nasaqui.com/components/feature-flags.md): A feature flag list with a key, an on/off switch per environment, rollout percentage, state and last update, plus the pure bucketing and evaluation logic behind percentage rollouts. - [GithubActivity](https://docs.nasaqui.com/components/github-activity.md): A repository activity card with a merged timeline plus commits, pull requests, workflow runs and deployments, each with status, author and a link to GitHub, filterable, with refresh, deploy and re-run callbacks. - [ProviderSwitcher](https://docs.nasaqui.com/components/provider-switcher.md): Lists an app's swappable capabilities (data, queue, cache, storage…) with the backend each runs on, and switches backends at runtime. - [Repository picker](https://docs.nasaqui.com/components/repository-picker.md): Pick a GitHub repository and branch by searching through the app installation, with the official GitHub mark, debounced search, keyboard support and a Configure access link. - [Terminal](https://docs.nasaqui.com/components/terminal.md): Terminal-style output with prompt lines, ANSI colours mapped to tokens, streaming, copy and follow-the-tail mode. Optional command input. - [Webhooks Manager](https://docs.nasaqui.com/components/webhooks-manager.md): Manage outgoing webhooks with endpoints, event selection, a signing secret shown once, a per-endpoint test, a delivery log with replay, inbound sources with a poll interval, and a push endpoint card shown once. ## Components: Editors - [Content table editor](https://docs.nasaqui.com/components/content-table-editor.md): An editable table for structured content with typed columns, cell editing by keyboard, sorting, search, undo and redo, footer totals, validation, CSV export and a save state. - [EditorTabs](https://docs.nasaqui.com/components/editor-chrome.md): The frame around a document editor with a tab strip of open documents, a status bar for words, cursor and save state, and a backlinks and related panel. - [EmailTemplates](https://docs.nasaqui.com/components/email-templates.md): Email template gallery with rendered thumbnails, an editor (name, category, subject, preview text, rich text body, variables) and a sandboxed live preview at desktop or phone width with test send. - [LandingPageEditor](https://docs.nasaqui.com/components/landing-page-editor.md): Section-based landing page editor with an outline (add, reorder, hide, duplicate, delete), a live preview at desktop or phone width and forms for hero, features, FAQ, call to action and text sections plus page address, search fields and direction. - [MarkdownEditor](https://docs.nasaqui.com/components/markdown-editor.md): A plain-text Markdown editor with a formatting toolbar, Ctrl/⌘ shortcuts and a Write / Preview / Split view rendered in Nasaq typography, controlled or uncontrolled, with a hidden input for form posts. - [RichMarkdown](https://docs.nasaqui.com/components/markdown-extras.md): Markdown with sortable and filterable tables, code blocks with line numbers and download, and a frontmatter table. - [Notes](https://docs.nasaqui.com/components/notes.md): A notes workspace with notebooks and tags, a list and a coloured board, search and sort, pinned and sealed notes, and an editor with a rich or Markdown body, backlinks, properties, word count, an autosave state, a context menu, an actions menu and keyboard shortcuts, driven by callbacks. - [Presentation editor](https://docs.nasaqui.com/components/presentation-editor.md): A slide deck editor with a reorderable thumbnail rail, in place editing on layouts, presenter notes and a full screen deck player with keyboard and swipe navigation. - [Report editor](https://docs.nasaqui.com/components/report-editor.md): A block based report editor for headings, rich text, key figures, charts, tables and callouts, with a live preview and a read only print friendly report viewer. - [RichTextEditor](https://docs.nasaqui.com/components/rich-text-editor.md): Tiptap-based rich text editor with a Nasaq toolbar, per-paragraph auto direction, HTML or JSON output and read-only mode. ## Components: Feedback SDK - [FeedbackReporter](https://docs.nasaqui.com/components/feedback-reporter.md): The interface around the feedback dialog. A floating launcher as a pill, circle or edge tab that visitors can drag aside, a hub of reports already made on this page, a launcher configurator with install code, and a shake-to-report sheet for phones. ## Components: Files - [ExportButton](https://docs.nasaqui.com/components/export-action.md): A button or menu that exports table data as CSV, XLSX or JSON, and PDF through a callback, with column choice, a rows scope of selected, filtered or all, a progress state and pure serializers with no dependency. - [FileExplorer](https://docs.nasaqui.com/components/file-explorer.md): A file browser with a folder tree, breadcrumbs, a sortable list or a grid, a preview pane, upload by button or drop, new folder and delete. It has no storage, your callbacks do the work. - [FileUpload](https://docs.nasaqui.com/components/file-upload.md): Dropzone with type, size and count validation, a file list with per-file progress, remove and retry, and a single-image upload with a thumbnail. You run the upload; it holds the state. - [ImportWizard](https://docs.nasaqui.com/components/import-wizard.md): A four step wizard that imports rows from a CSV or pasted text. It maps columns to fields, previews and validates rows, then commits the valid ones. - [TrashBin](https://docs.nasaqui.com/components/trash-bin.md): The trash of an app, listing deleted items with who deleted them and a retention countdown, with restore, delete forever and empty trash behind confirmations, built on EntityList. - [VersionHistory](https://docs.nasaqui.com/components/version-history.md): Saved versions newest first with a read-only preview, a line diff against the previous, current or any other version, and a confirmed restore that saves as a new version. ## Components: Form Builders - [FormBuilder](https://docs.nasaqui.com/components/form-builder.md): Build an embeddable public form in English and Arabic. Add and order fields, write show hide or require rules, choose which sites may embed it, and copy the snippet. - [PublicForm](https://docs.nasaqui.com/components/public-form.md): Renders a form definition for visitors, with rules that show hide or require fields, validation in Arabic and English, a hidden honeypot and a thank-you. Includes a ready contact form with a topic. - [Repeater](https://docs.nasaqui.com/components/repeater.md): A list of rows the user can add, remove, duplicate, reorder by drag or keyboard and collapse, with min and max limits. Bring your own row content. - [SchemaForm](https://docs.nasaqui.com/components/schema-form.md): A form generated from a JSON Schema, with enums, booleans, dates, objects nested to any depth, lists of values and lists of objects (add, remove, reorder, collapse), foreign keys, show and hide rules by path, client validation and server field errors on nested paths. - [SchemaRepeater](https://docs.nasaqui.com/components/schema-repeater.md): A Repeater whose rows are generated from a field schema (text, number, select, switch, date, nested repeater) with built-in validation in English and Arabic. ## Components: Forms - [AddressInput](https://docs.nasaqui.com/components/address-input.md): Address form with cascading country, city and area comboboxes (searchable in English or Arabic), street and detail fields and an embedded PhoneInput. Places come from a pluggable LocationsDataSource, by default the CircleXO hub. - [Checkbox](https://docs.nasaqui.com/components/checkbox.md): A box for choices applied on submit and for selecting rows. Supports an indeterminate state for "some selected". - [ChipGroup](https://docs.nasaqui.com/components/chip-group.md): A single-select row of filter chips for categories or views; scrolls sideways on narrow screens instead of wrapping. - [Combobox](https://docs.nasaqui.com/components/combobox.md): Searchable select for long lists, single or multiple (chips), with Arabic-aware filtering and an empty state. Wraps Base UI Combobox. - [CountrySelect](https://docs.nasaqui.com/components/country-select.md): Searchable country combobox with SVG flags and names in English or Arabic. The value is the ISO 3166-1 alpha-2 code. Uses PHONE_COUNTRIES or a LocationsDataSource. - [CurrencyInput](https://docs.nasaqui.com/components/currency-input.md): Money field whose value is an integer in minor units. The currency sets the decimals, Arabic and Western digits both parse, and the symbol sits where the locale puts it. - [Field](https://docs.nasaqui.com/components/field.md): Labelled form field (label, control, description, error) built on Base UI Field, with the Nasaq text Input and Textarea. - [Form](https://docs.nasaqui.com/components/form.md): A form that wires errors to Nasaq fields by name, with useForm for values, validation, a pending submit and server errors mapped back onto fields, and FormField for label, control, description and error in one line. - [InlineEdit](https://docs.nasaqui.com/components/inline-edit.md): Text that turns into an input in place with Save and Cancel, async save, validation by type, and keyboard and focus handling. - [InputGroup](https://docs.nasaqui.com/components/input-group.md): An input with leading and trailing addons (icon, text affix or button) inside one bordered control that matches Input height. - [LimitsEditor](https://docs.nasaqui.com/components/limits-editor.md): A per-resource limits form where each row is a number, Unlimited or Inherit, with optional price, overage price, per-key rate limit and spend cap, validation and change tracking. - [NativeSelect](https://docs.nasaqui.com/components/native-select.md): The browser's own select, styled like Input, with options as data or as option/optgroup children, a placeholder, two sizes and the Field label, description and invalid state. - [OtpInput](https://docs.nasaqui.com/components/otp-input.md): One-time-code entry with N boxes; paste fills every box, Backspace steps back, digits stay left-to-right in RTL. - [PasswordInput](https://docs.nasaqui.com/components/password-input.md): Password field built on InputGroup with a show/hide toggle (aria-pressed), an optional strength meter and an optional requirement checklist. - [PhoneInput](https://docs.nasaqui.com/components/phone-input.md): Phone number field with a searchable country list (SVG flag, name in English or Arabic, calling code; Gulf and Arab countries first) and a digits input that groups the number as you type. The value is E.164. - [RadioGroup](https://docs.nasaqui.com/components/radio-group.md): Pick exactly one option from a short list, as plain radios or as bordered cards for plan-style choices. - [RelationPicker](https://docs.nasaqui.com/components/relation-picker.md): A field that points at another record and finds it by searching your API, storing ids and showing names, for one record or many, with create from typed text and loading, empty and error states. - [Select](https://docs.nasaqui.com/components/select.md): Pick one value from a short list. A Field-style trigger that opens a DropdownMenu-style list. Wraps Base UI Select. - [Slider](https://docs.nasaqui.com/components/slider.md): Draggable single-value or range slider with marks, a Nasaq-formatted value label, disabled state and Field wiring. Wraps Base UI Slider. - [Switch](https://docs.nasaqui.com/components/switch.md): On/off toggle for a setting that applies immediately; the thumb mirrors in RTL. - [TagInput](https://docs.nasaqui.com/components/tag-input.md): Chips inside an input box. Enter or comma adds, Backspace removes the last, paste splits on commas and new lines; supports maxTags, validation, suggestions, and Field. ## Components: Gamification - [Gamification](https://docs.nasaqui.com/components/gamification.md): A kit for progress and rewards. Leaderboard with period tabs, podium, movement arrows and your rank pinned, a badge grid with earned, in-progress and locked states and rarity, achievement card, XP and level progress, streak counter with calendar, reward cards and an unlock toast that respects reduced motion. - [Loyalty and Promo](https://docs.nasaqui.com/components/loyalty-promo.md): A loyalty card with tiers and expiring points, a points ledger, promo-code entry and management, and a customer visit history. ## Components: Healthcare - [ClinicDashboard](https://docs.nasaqui.com/components/clinic-dashboard.md): Front-desk overview with waiting count and longest wait, doctors on duty, room use, a card per room and a row per doctor, each state shown with an icon and a word. - [ClinicQueue](https://docs.nasaqui.com/components/clinic-queue.md): The doctor's live patient queue - a big Call next button, who is called or in the room, and a table of everyone else with call, call again, skip, start, finish and put back actions. - [ClinicSchedule](https://docs.nasaqui.com/components/clinic-schedule.md): A doctor's day on a timeline, with each appointment named and coloured by status, a summary by status, an in-visit card, the next patient with lateness and an overlap warning. - [CurrentVisit](https://docs.nasaqui.com/components/current-visit.md): The visit in progress - patient card with allergies, earlier visits, a running timer, notes, a prescription list with validation, follow-up choices and a finish that checks the record. ## Components: Integrations - [AnalyticsConnect](https://docs.nasaqui.com/components/analytics-connect.md): The connect-account empty state of an analytics page, built on IntegrationConnector, plus AnalyticsPageFrame, the shared page shell. - [ConnectedAccounts](https://docs.nasaqui.com/components/connected-accounts.md): OAuth sign-in methods for an account, each provider with its official logo, the connected email or username, and Connect or Disconnect, and the last remaining sign-in method cannot be disconnected. - [IntegrationConnector](https://docs.nasaqui.com/components/integration-connector.md): Connections page for OAuth services such as Google Analytics, Search Console, YouTube, GitHub and Slack, with cards, a scope consent dialog, account or property picker, status, reconnect and confirmed disconnect. - [McpConnect](https://docs.nasaqui.com/components/mcp-connect.md): Install guide for an MCP server with per-client tabs for Claude Code, Claude Desktop, Cursor, VS Code and generic JSON, copyable snippets with a masked token, one-click deep links and a connection test. - [Placement Settings](https://docs.nasaqui.com/components/placement-settings.md): Where a plugin or module appears in the app shell. Sidebar, header, side panel, floating widget or hidden, as radio cards with a small picture of the shell; its order; and whether the app opens on it. Keeps a draft, shows what is unsaved and saves only what changed. - [Plugin Card](https://docs.nasaqui.com/components/plugin-card.md): A plugin in a catalogue or admin grid. Icon, name, version, kind, enabled state and last activity, a description, a headline count with a sparkline, and Page and Details actions; selectable as a checkbox card for bulk actions. - [WhatsappQrConnect](https://docs.nasaqui.com/components/whatsapp-qr-connect.md): Link a WhatsApp number by scanning a QR code, with numbered steps, a live countdown, automatic refresh when the code expires, and connected and disconnected states with a confirmed disconnect. ## Components: Keyboard & Commands - [CommandPalette](https://docs.nasaqui.com/components/command-palette.md): Spotlight-style ⌘K palette that ranks and renders every command registered in the app, with nested pages, async results and a SearchTrigger field. - [CommandProvider](https://docs.nasaqui.com/components/commands.md): The command registry behind the palette - components register commands and async sources while mounted; Nasaq ranks, renders and binds shortcuts. - [HotkeyRecorder](https://docs.nasaqui.com/components/hotkey-recorder.md): A control that records a keyboard shortcut from the keys the user presses, reads the physical key so it works on an Arabic layout, refuses shortcuts the browser or OS keeps, warns about clashes, and a settings list of bindings with reset. - [KeyboardShortcuts](https://docs.nasaqui.com/components/keyboard-shortcuts.md): A searchable reference of an app's keyboard shortcuts, grouped, drawn for the reader's keyboard (Command on a Mac, Ctrl elsewhere) with a Mac/Windows switch, plus a dialog that opens with the question mark key. ## Components: Layout - [Accordion](https://docs.nasaqui.com/components/accordion.md): Stack of collapsible sections, one open at a time or several, with a rotating chevron and animated height. Wraps Base UI Accordion. - [AppShell](https://docs.nasaqui.com/components/app-shell.md): The product frame every Nasaq app uses - resizable, collapsible sidebar at the inline start, sticky header, main area, mobile sheet, and the command registry. - [AspectRatio](https://docs.nasaqui.com/components/aspect-ratio.md): A box that keeps a fixed width-to-height ratio as it resizes, for video embeds, maps, cover images and thumbnails; direct img, video and iframe children fill it. - [Card](https://docs.nasaqui.com/components/card.md): Bordered surface that groups one unit the user acts on or compares, with header, action, content and footer slots. - [Collapsible](https://docs.nasaqui.com/components/collapsible.md): Show/hide disclosure with an animated height-and-opacity panel. Wraps Base UI Collapsible. - [DashboardBoard](https://docs.nasaqui.com/components/dashboard-board.md): A customisable dashboard grid where people drag to reorder cards, resize them, pin favourites, add or remove widgets and change each widget's settings, with an edit mode that saves or cancels as one change. - [Detail Layout](https://docs.nasaqui.com/components/detail-layout.md): A detail page for one thing (a plugin, a customer, a server). A sub-sidebar of tabs grouped in sections that becomes a tab bar on small screens, a header with icon, name, version, kind, status and recent activity, the active tab's content, and loading and error states. - [DocsShell](https://docs.nasaqui.com/components/docs-shell.md): The documentation layout with a tree sidebar, breadcrumb, copy page, callouts, an on this page rail that follows the reader and previous and next links. - [PageHeader](https://docs.nasaqui.com/components/page-header.md): The top of a page: breadcrumbs or a back link, the page title, a line of description, meta facts and the page's actions at the inline end. - [ProductShell](https://docs.nasaqui.com/components/product-shell.md): The shell every Nasaq product shares: AppShell with the standard menu order (Dashboard → product groups → Reports → Integrations → Settings), workspace switcher, ⌘K, the Connect pill and a phone tab bar. - [ResizablePanelGroup](https://docs.nasaqui.com/components/resizable.md): Split panes with drag handles and keyboard resize, built on react-resizable-panels, with RTL handled for horizontal groups. - [ScrollArea](https://docs.nasaqui.com/components/scroll-area.md): A bounded scroll container with a thin scrollbar on the inline-end edge, keyboard-scrollable and RTL-aware. - [Separator](https://docs.nasaqui.com/components/separator.md): A 1px horizontal or vertical divider line in the border token. Wraps Base UI Separator. ## Components: Loading & States - [DataState](https://docs.nasaqui.com/components/data-state.md): One wrapper for the states of a data view, in a fixed order of loading, signed out, service unavailable, error with retry, empty with an action, then the content. - [ErrorPage](https://docs.nasaqui.com/components/error-pages.md): Full-page states for 404, 500, offline, maintenance, no access, unknown workspace and a module that is coming soon, with sensible actions, an error ID to quote and English and Arabic copy. - [ProductOnboarding](https://docs.nasaqui.com/components/product-onboarding.md): The first-run flow every Nasaq product shares: workspace → business basics → sample data → connect your AI → invite your team → done. Skippable and resumable from server state. - [Progress](https://docs.nasaqui.com/components/progress.md): Progress bar for work under way (with an indeterminate state and tones) and Meter for a quantity against a limit that turns warning and danger past thresholds. Wraps Base UI Progress and Meter. - [RouteProgress](https://docs.nasaqui.com/components/route-progress.md): A thin progress bar along the top edge for navigation and background jobs. It creeps while work runs, jumps to full when it ends, and a hook counts overlapping jobs. - [Spinner](https://docs.nasaqui.com/components/spinner.md): Small rotating loader icon for inline pending work; decorative, stops under reduced motion. - [EmptyState](https://docs.nasaqui.com/components/states.md): Empty, error and loading states for a region (dashed frame with icon, title, description and actions; skeleton rows), plus the Skeleton primitive. - [WsStatus](https://docs.nasaqui.com/components/ws-status.md): A realtime connection indicator showing live with latency, connecting, reconnecting with a countdown to the next try, and offline, as a pill, bare text or a banner with Retry now. ## Components: Marketing - [CampaignComposer](https://docs.nasaqui.com/components/campaign-composer.md): Compose an email or WhatsApp broadcast with a live audience count, a rich or plain editor, a preview, a test send, pre-send checks, a confirmation and a send progress bar. - [SocialComposer](https://docs.nasaqui.com/components/social-composer.md): One post for several social networks. Each target gets its own limit, counter, preview, media check and optional own version, and a metrics table reports how the posts did. - [SubscriptionLanding](https://docs.nasaqui.com/components/subscription-landing.md): The three public pages of an email list, subscribe with explicit consent, confirm for double opt-in, and unsubscribe with an optional reason and a way back. - [TrendsFeed](https://docs.nasaqui.com/components/trends-feed.md): A feed of trending news topics with state tabs, day groups, score and reasons, outlets and expandable articles, plus a sources catalogue in three tiers that falls back to the next tier when one has nothing working. - [YouTubeChannelPage](https://docs.nasaqui.com/components/youtube-channel-page.md): A YouTube channel report - views, watch time, subscribers and view duration with comparison, a chart, top videos, traffic sources and countries. ## Components: Monitoring - [ApmPage](https://docs.nasaqui.com/components/apm-page.md): An application performance page - latency percentiles, throughput, error rate with an SLO, slow endpoints and traces with a span waterfall. - [APM panels](https://docs.nasaqui.com/components/apm-panels.md): Latency percentiles (p50, p95, p99), an error-rate panel with an SLO, a slow-endpoints table and a trace list with a span waterfall. - [Error tracking](https://docs.nasaqui.com/components/error-tracking.md): A list of captured errors with a frequency sparkline, and a detail view with stack trace, breadcrumbs, tags, captured screenshot, console and network, plus resolve and ignore. - [LogViewer](https://docs.nasaqui.com/components/log-viewer.md): Virtualised log stream with level filters and counts, time ranges, timestamps, search with highlights and regex, follow tail, pause and resume, load older, server-side filtering, detail panel, copy and download. - [StatusPage](https://docs.nasaqui.com/components/status-page.md): The public status page - an overall banner, each service with a daily history bar and uptime, active and past incidents with their updates, and scheduled maintenance. No admin controls and no sign-in. - [StatusPageManager](https://docs.nasaqui.com/components/status-page-manager.md): Admin for the public status page - title, address and custom domain, which services show and in what order (staged until Save), and posting incidents that appear on the page. - [TimeSeriesPanel](https://docs.nasaqui.com/components/time-series-panel.md): A chart card for one metric at a time, with a previous-period comparison line, a metric switcher and threshold lines. Also exports PeriodToggle. - [UptimeMonitors](https://docs.nasaqui.com/components/uptime-monitors.md): The admin side of uptime - a table of monitors with status, a recent-checks bar, a 24h, 7d or 30d uptime badge, response time and last check, pause, resume, check now, edit and delete, plus incidents with their updates. - [WebVitalGauge](https://docs.nasaqui.com/components/web-vital-gauge.md): A gauge for one Core Web Vital (LCP, INP, CLS, FCP, TTFB) with Google's good, needs-improvement and poor bands, the p75 value and the distribution of page loads. - [WebVitalsPage](https://docs.nasaqui.com/components/web-vitals-page.md): A web vitals report - a Core Web Vitals verdict, gauges for LCP, INP, CLS, FCP and TTFB with distributions, a trend chart with Google's limits, and pages to fix. ## Components: Navigation - [Breadcrumb](https://docs.nasaqui.com/components/breadcrumb.md): Location trail for the app header - a nav landmark with an ordered list, links, a current page and directional separators. - [IconRailSidebar](https://docs.nasaqui.com/components/icon-rail-sidebar.md): Two-level navigation. A slim rail of icons picks the section and a sub-sidebar beside it lists that section's pages. Folds into a sheet on mobile. - [Menubar](https://docs.nasaqui.com/components/menubar.md): Desktop-app menu bar (File, Edit, View) on Base UI Menubar and Menu, with submenus, checkbox and radio items and Kbd shortcuts. Uses the same item styles as DropdownMenu. - [MobileNavKit](https://docs.nasaqui.com/components/mobile-nav-kit.md): Mobile navigation, a bottom tab bar with badges, swipe-action list rows that also open a context menu, and a horizontally scrolling filter strip. - [NavigationMenu](https://docs.nasaqui.com/components/navigation-menu.md): Marketing-site header menu on Base UI NavigationMenu, with chevron triggers, a shared animated panel, link lists and a featured card slot. Works in RTL. - [Pagination](https://docs.nasaqui.com/components/pagination.md): Numbered Pagination with ellipsis, CursorPager (previous/next with a "Showing X-Y" label) and LoadMore button with a loading state. - [ProductSwitcher](https://docs.nasaqui.com/components/product-switcher.md): App launcher grid that shows each installed product's official mark, plus a sidebar products group and "Switch to…" palette commands. - [SidebarCustomize](https://docs.nasaqui.com/components/sidebar-layout.md): Lets users reorder and hide sidebar items - a persisted layout hook, drag-to-reorder in the sidebar, and an accessible customize dialog. - [Stepper](https://docs.nasaqui.com/components/stepper.md): Ordered steps with markers and connectors, horizontal or vertical, with complete, current, upcoming and error states. - [Tabs](https://docs.nasaqui.com/components/tabs.md): Switches between views of the same subject without leaving the page; segmented or underline style with a sliding indicator, built on Base UI Tabs. - [TreeView](https://docs.nasaqui.com/components/tree-view.md): An accessible tree of nested items with expand and collapse, single or multiple selection, roving-tabindex keyboard navigation with typeahead, lazy children and RTL-aware arrow keys. - [UserMenu](https://docs.nasaqui.com/components/user-menu.md): Avatar menu at the bottom of the sidebar - identity, your account items, theme and language submenus, and sign out. - [WorkspaceSwitcher](https://docs.nasaqui.com/components/workspace-switcher.md): Organisation / team switcher for the top of the sidebar, with logo, plan line, an optional "Add workspace" item and room for extra menu items. ## Components: Onboarding - [OnboardingChecklist](https://docs.nasaqui.com/components/onboarding-checklist.md): The in-app Get started card: x of y done with a progress bar, the next step highlighted, one action per open item and a dismiss. - [OnboardingFlow](https://docs.nasaqui.com/components/onboarding-flow.md): The flow after sign-up: welcome, profile, workspace, invites, preferences, first integration and a review, with skip, back and progress that resumes after a reload. - [SetupWizard](https://docs.nasaqui.com/components/setup-wizard.md): Multi-step first-run wizard with a server-decided completion gate, plus a guided connect step that waits live for an agent to enroll. ## Components: Overlays - [AlertDialog](https://docs.nasaqui.com/components/alert-dialog.md): Modal that interrupts to ask for an explicit answer before a consequential action, plus a ConfirmButton shorthand. Wraps Base UI AlertDialog. - [ConfirmProvider](https://docs.nasaqui.com/components/confirm-provider.md): One app-wide confirm dialog you can await from any handler, so `if (!(await confirm({ title }))) return;` replaces window.confirm with a styled, localised AlertDialog. - [ContextMenu](https://docs.nasaqui.com/components/context-menu.md): Right-click (or long-press) menu for a region, with items, checkbox and radio items, groups, shortcuts and submenus. Wraps Base UI ContextMenu and shares DropdownMenu styling. - [Dialog](https://docs.nasaqui.com/components/dialog.md): Modal dialog for short focused tasks and confirmations, with backdrop, focus trap and a built-in close button. Wraps Base UI Dialog. - [Drawer](https://docs.nasaqui.com/components/drawer.md): Mobile bottom sheet on Base UI Dialog with a drag handle and swipe-down-to-close; snaps back below the threshold and respects reduced motion. - [DropdownMenu](https://docs.nasaqui.com/components/dropdown-menu.md): Action menu opened from a trigger, with items, checkbox and radio items, groups, shortcuts and submenus. Wraps Base UI Menu. - [HoverCard](https://docs.nasaqui.com/components/hover-card.md): Rich preview card shown when a link is hovered or focused, for sighted pointer users. Wraps Base UI PreviewCard. - [Popover](https://docs.nasaqui.com/components/popover.md): Anchored floating panel opened by a click on a trigger, holding rich content such as text, forms or actions. Wraps Base UI Popover. - [Sheet](https://docs.nasaqui.com/components/sheet.md): Side-over panel that slides from the inline-start, inline-end or bottom edge, with header, scrolling body and footer. Wraps Base UI Dialog. - [Tooltip](https://docs.nasaqui.com/components/tooltip.md): Short supplementary label shown on hover and keyboard focus of a trigger. Shorthand plus composable parts over Base UI Tooltip. ## Components: Pickers - [Appearance pickers](https://docs.nasaqui.com/components/appearance-pickers.md): Pickers for how an app looks and reads. A gallery of named themes with mini previews, reading settings for text size, line width and spacing with a live sample, and a wallpaper picker with upload and dimming. They hold the choice; you apply and save it. - [Calendar](https://docs.nasaqui.com/components/calendar.md): Month grid for picking a day or a date range. Native Date and Intl only; locale-aware week start, labels and RTL keyboard. - [ColorPicker](https://docs.nasaqui.com/components/color-picker.md): Swatch trigger that opens a popover with a swatch grid (tag palette by default), a validated hex field and an optional native colour input. - [DatePicker](https://docs.nasaqui.com/components/date-picker.md): Input-looking trigger that opens a Calendar in a popover to pick a date or a range, plus a segmented TimePicker. Field-aware, locale and RTL aware. - [EmojiPicker](https://docs.nasaqui.com/components/emoji-picker.md): Emoji picker in a popover, with search, categories, skin tones, RTL-aware keyboard navigation and lazily loaded emoji data. - [IconPicker](https://docs.nasaqui.com/components/icon-picker.md): A popover or inline panel to choose a lucide icon with search in English and Arabic, categories, recent icons, a capped grid with show more and full keyboard navigation. Returns the icon name. - [Time fields](https://docs.nasaqui.com/components/time-fields.md): Fields for clock times and time zones. A 24 hour time you type into (930 becomes 09:30), a start and end span, a live clock for one zone and a time zone picker with a ticking clock on every row. Everything comes from Intl, no zone table is shipped. - [TimeRangePicker](https://docs.nasaqui.com/components/time-range-picker.md): Picks the window a dashboard covers with relative presets (1h, 6h, 24h, 7d, 30d), a week navigator, custom days and an optional comparison period. The value is plain data that reads and writes to a URL, and days are read in a named time zone. ## Components: Pricing - [BundleCard](https://docs.nasaqui.com/components/bundle-card.md): Several apps sold together for less; shows the overlapping artwork stack, what it is for, the computed saving and the price against the separate total. - [PlanCard](https://docs.nasaqui.com/components/plan-card.md): One pricing plan on a quiet surface, with the recommended plan brand-tinted; PlanGrid lays plans side by side. - [PlanCatalogEditor](https://docs.nasaqui.com/components/plan-catalog-editor.md): Admin editor for a product catalog (plans, features, apps, pay-as-you-go prices and bundles) that edits a draft and publishes it through a sync preview dry run and an apply step. - [Price](https://docs.nasaqui.com/components/price.md): A locale-formatted price with currency, billing period suffix, optional struck-through original and a built-in "Free" label. - [PricingTable](https://docs.nasaqui.com/components/pricing-table.md): Plans from data with a Monthly / Yearly switch and working subscribe, upgrade and downgrade buttons, plus a feature comparison matrix and a compact plan picker. - [UpgradeDialog](https://docs.nasaqui.com/components/upgrade-prompt.md): The in-app ways to ask for an upgrade — a promotion popup with plans and an offer countdown, a banner, a sidebar card, a feature gate and a Pro badge. ## Components: Productivity - [FocusStatusChip](https://docs.nasaqui.com/components/focus-status.md): Focus presence, a header status chip with the time left, an avatar with an in-focus dot, and a do not disturb switch. focusStateOf derives the state from a pomodoro. - [PomodoroCard](https://docs.nasaqui.com/components/pomodoro.md): A pomodoro with focus, short and long breaks. usePomodoro runs the cycle drift-free, PomodoroCard shows the ring, dots and linked task, and BreakLockScreen is the full-screen break. - [QuickCapture](https://docs.nasaqui.com/components/quick-capture.md): A capture window opened by a global shortcut to jot a note or clip a page, with tags, a destination and save with Ctrl or Cmd plus Enter. - [Scheduler](https://docs.nasaqui.com/components/scheduler.md): Read-only day, week and month schedule with overlap-aware event blocks, plus SlotPicker, a booking-style Calendar and radio list of available times. - [TimeTracker](https://docs.nasaqui.com/components/time-tracker.md): A running timer with project and task picker, manual time entries, an entries list grouped by day, and a day or week timesheet grid with totals. ## Components: Projects & Work - [Checklist](https://docs.nasaqui.com/components/checklist.md): A checklist with one level of subtasks, a progress bar, attachments and a row menu. A parent follows its subtasks and ticking a parent ticks them all. - [HR Attendance and Leave](https://docs.nasaqui.com/components/hr-attendance.md): An attendance marker with breaks, leave balances and requests that check overlap and balance, and payroll runs in whole minor units. - [Issue Board](https://docs.nasaqui.com/components/issue-board.md): A ready-made issue kanban. Issue cards with type, key, priority, labels, due date, votes, comments, attachments and assignee; search and assignee / reporter filters; a header with the count and New issue. - [Issue View](https://docs.nasaqui.com/components/issue-view.md): One issue as a page or a quick-view drawer with an inline title, a rich description, a properties sidebar, checklist, sub-issues, linked pull requests, comments, activity, time and AI cost. - [KanbanBoard](https://docs.nasaqui.com/components/kanban-board.md): Controlled board of columns and draggable cards (dnd-kit sortable) with keyboard moves, localised announcements and RTL column flow. - [ProjectList](https://docs.nasaqui.com/components/project-list.md): A list of projects as a table or cards with status, progress, members, lead, due date and tags, plus search, status and client and member and tag filters, bulk select, loading skeletons and an empty state. - [Project View](https://docs.nasaqui.com/components/project-view.md): A project page with a header, progress and members, and tabs for overview, board, list, timeline, activity, time, AI cost, files, memory, vault, GitHub and settings. - [StatusLabelManager](https://docs.nasaqui.com/components/status-label-manager.md): An admin screen to manage workflow statuses grouped by stage and flat labels, with colour, reorder, edit and delete that warns when in use. ## Components: Security - [AccessGrants](https://docs.nasaqui.com/components/access-grants.md): Who and what can act for you. Authorized apps and agents per workspace with their scopes and revoke, delegated agent keys, and a matrix of agents by resource with no access, read or read and write. - [ActiveSessions](https://docs.nasaqui.com/components/active-sessions.md): The devices signed in to an account, with device type, IP, place and last activity, the current device first, and sign out per device or for every other device behind a confirmation. - [AuditLog](https://docs.nasaqui.com/components/audit-log.md): The audit log table. Filter by actor, action, entity, channel (web, API or MCP) and dates, open a row for the field-level before and after, and set how long entries are kept. - [CertificateMonitor](https://docs.nasaqui.com/components/cert-monitor.md): A TLS certificate monitor - a table of hosts with issuer, expiry date and a days-left badge that turns amber at 30 days and red at 7 or when expired, soonest first, with check again, renew and stop monitoring. - [DataPrivacy](https://docs.nasaqui.com/components/data-privacy.md): Your data rights. Request a copy of your data and follow it until it is ready to download, delete the account with a grace period, and the public page that cancels a scheduled deletion. - [PasskeyList](https://docs.nasaqui.com/components/passkey-list.md): Manage the passkeys on an account with a list with device hint, created and last-used dates, add through an async callback, rename in place, remove with confirmation, an unsupported-browser notice and an empty state. - [TwoFactorSetup](https://docs.nasaqui.com/components/two-factor-setup.md): Presentational TOTP two-factor flow in three steps (scan the QR code or type the key, confirm a 6-digit code, save recovery codes) plus the enabled state with regenerate and disable, driven by async callbacks. - [Vault](https://docs.nasaqui.com/components/vault.md): A secrets manager UI with grouped secrets, masked values fetched only on reveal or copy, auto-hide, expiry badges, add, edit and delete, and an access log. - [VulnReport](https://docs.nasaqui.com/components/vuln-report.md): A vulnerability scan report - CVE counts per severity, the worst findings with the version that fixes them, the trend against the previous scan and a stacked history of the last scans. ## Components: SEO - [BacklinkMonitor](https://docs.nasaqui.com/components/backlink-monitor.md): Backlink monitoring: new, lost and toxic links, a gained and lost chart, referring domains, and disavow or mark-safe actions. - [KeywordPlanner](https://docs.nasaqui.com/components/keyword-planner.md): A keyword planning table with search intent, cluster, owning URL and cannibalization: which of your pages compete for the same keyword and which one to keep. - [KeywordTracker](https://docs.nasaqui.com/components/keyword-tracker.md): Rank tracking for a keyword list: position and change arrows, best position, URL, volume, difficulty, SERP features, history chart, top 3 / 10 / 100 buckets, add-keywords dialog and competitor comparison. - [SearchConsolePage](https://docs.nasaqui.com/components/search-console-page.md): A Search Console report - clicks, impressions, CTR and position tiles that drive the chart, plus queries, pages, countries and devices. - [SearchPerformanceTable](https://docs.nasaqui.com/components/search-performance-table.md): Queries or pages with clicks, impressions, CTR and average position, sortable, filterable and paginated, with change against the previous period. - [SeoPageList](https://docs.nasaqui.com/components/seo-pages.md): A pages list with SEO score, open-issue count, index status and Core Web Vitals, plus a per-page issue checklist with fix hints. - [SeoPreview](https://docs.nasaqui.com/components/seo-preview.md): How a page looks in Google (desktop and mobile) and as an Open Graph, X, WhatsApp and LinkedIn share card, with title and description length meters. ## Components: Server Tools - [BackupManager](https://docs.nasaqui.com/components/backup-manager.md): Backups in one place with a summary, history with progress, run now, download, delete, a restore that needs confirming, and a schedule and retention form with a preview of what would be pruned. - [DatabaseExplorer](https://docs.nasaqui.com/components/database-explorer.md): A database browser with a schema and table tree, a SQL editor, a results grid with CSV export, table structure and query history. It has no connection of its own, you run the SQL. - [DeployView](https://docs.nasaqui.com/components/deploy-view.md): A deploy run as ordered steps with status, live durations, expandable ANSI logs that follow the output, and retry for failed steps. - [DnsManagement](https://docs.nasaqui.com/components/dns-management.md): A DNS zone editor with a searchable records table (A, AAAA, CNAME, MX, TXT and more), an add and edit form with type-aware validation, TTL choices, a proxy toggle and confirmed delete. - [DomainsManager](https://docs.nasaqui.com/components/domains-manager.md): Custom domains for a site - add a domain, see its DNS check state, check again, make one primary, remove with a confirm, with the CNAME target to copy. Also DomainChips, compact chips with a +N overflow chip. - [FinOps Cost](https://docs.nasaqui.com/components/finops-cost.md): A cost page for servers with KPI tiles against last month, a budget meter, per-server price and CPU, memory and disk use with rightsizing hints, cost by category, and manual line items you can add and remove. - [Mail Settings](https://docs.nasaqui.com/components/mail-settings.md): SMTP settings with a write-only password and a test send that reports each step, plus mail domains with an SPF, DKIM and DMARC checklist, mailboxes with quota and aliases. - [NetworkRules](https://docs.nasaqui.com/components/network-rules.md): A network rules editor with a firewall tab (allow or deny, protocol, port, source) and an HTTP rules tab (redirects, headers, basic auth, IP allow and deny). Edits are staged until Apply, with move, undo and a lockout warning. - [ProxyHosts](https://docs.nasaqui.com/components/proxy-hosts.md): A reverse-proxy host editor - a table of hosts with upstream, TLS mode and websockets, an enabled switch per host, and a dialog to add or edit one. Domains reuse DomainChips. - [Server Admin](https://docs.nasaqui.com/components/server-admin.md): Four admin panels for one server. A systemd service list with start, stop and restart, a package updates panel, an SSH key manager with a servers by keys matrix, and a job queue monitor with retry and forget. - [ServerCard](https://docs.nasaqui.com/components/server-card.md): One server on a card - status, address, hardware, live CPU, memory and disk meters with a sparkline, last deploy, power controls that follow the state, snapshots to take, roll back and delete, and a resource limits editor. ## Components: Store Admin - [POS Register](https://docs.nasaqui.com/components/pos-register.md): A touch point-of-sale register with a product grid, basket, held sales, split payment across cash card and wallet, cash-drawer session and walk-in sale, in exact integer money. - [Stock Ledger](https://docs.nasaqui.com/components/stock-ledger.md): On-hand stock per warehouse computed from receive, issue and adjust movements, with a running-balance trail and a record dialog. - [StoreDashboard](https://docs.nasaqui.com/components/store-dashboard.md): Store admin home with sales, orders, average order value, conversion and returning customers against the previous period, a sales chart, conversion funnel, top products, categories, channels and cities, low stock alerts, recent orders and live visitors on a customisable board. - [StoreOrdersList](https://docs.nasaqui.com/components/store-orders-admin.md): Store admin orders. A data-table order list with status, payment and fulfilment chips, filters, saved views and bulk actions; an order detail with partial fulfilment and tracking, refunds by line or amount with restock, cancel, a notes timeline and customer cards; printable invoices and packing slips; abandoned carts with a recovery email. The refund, fulfilment and status maths is pure and tested. - [Store Products Admin](https://docs.nasaqui.com/components/store-products-admin.md): The merchant side of the catalogue: a product list with bulk edit, a product editor with a generated variant matrix, media manager and search preview, and a collections manager with manual and rule-based collections. - [Store Settings](https://docs.nasaqui.com/components/store-settings.md): The merchant's store configuration: shipping zones and rates with local pickup, tax rates (inclusive or exclusive), discounts with a basket simulator, and gift cards with issue, ledger history and a checkout redeem field. Pure, tested logic for rate resolution, discount evaluation and gift card balances. ## Components: Storefront - [Catalog store](https://docs.nasaqui.com/components/catalog-store.md): A store for installable things with search, category chips, sort, a card grid and a detail sheet with install and uninstall, reusable for workflow steps, plugins and apps. - [CheckoutSteps](https://docs.nasaqui.com/components/checkout-steps.md): A five-step subscription checkout (plan, billing details, payment method, review, success) with a presentational card form, order summary and Intl money. - [Marketplace](https://docs.nasaqui.com/components/marketplace.md): A store with a featured strip, categories and search, a detail page with install header, tabs, sidebar and permissions, a publish form and a template gallery, built on the catalog store. - [ProductCard](https://docs.nasaqui.com/components/product-card.md): Store card for a product (artwork, name, pitch, rating, price, install action) with no border; switches between tile and row by container width. Includes ProductGrid and a compact ProductList. - [ProductDetail](https://docs.nasaqui.com/components/product-detail.md): A complete product page from one CommerceProduct: gallery with zoom and swipe, availability-aware variant picker, quantity, price with percent off, stock and delivery lines, add to cart, buy now, sticky mobile bar, size guide and content sections. - [ProductReviews](https://docs.nasaqui.com/components/product-reviews.md): Customer reviews for a product: rating summary with a histogram that filters, sort and filter chips, photo strip, helpful votes, seller replies, report, and a write-review form. Includes ProductQA for questions and answers. - [Rating](https://docs.nasaqui.com/components/rating.md): One star, the average score and an optional compact count ("4.8 · 2.1K workspaces"), with built-in English and Arabic screen reader text. - [StoreOrderHistory](https://docs.nasaqui.com/components/store-account.md): The customer's store account. Order history with status filters and reorder, an order page with the tracking timeline and a carrier link, a return and refund request flow with RMA status, a wishlist with move to cart and back-in-stock notify, an address book and recently viewed products. The reorder, return and wishlist rules are pure and tested. - [Store Cart](https://docs.nasaqui.com/components/store-cart.md): A mini cart drawer and a full cart page with quantity limits, undo, save for later, promo code, shipping estimate, savings and live announcements. - [Store Checkout](https://docs.nasaqui.com/components/store-checkout.md): One-page checkout for physical goods with contact, country-aware address, delivery, payment, summary sidebar and an order confirmation page. - [Store header and footer](https://docs.nasaqui.com/components/store-chrome.md): The storefront frame: announcement bar, sticky header with mega menu, search autocomplete and cart count, and a footer with link columns, newsletter, payments slot, social links and language and currency switches. - [Store product listing](https://docs.nasaqui.com/components/store-listing.md): A storefront results page: facet sidebar with live counts, active chips, sort, grid and list views, pagination or load more, empty results with suggestions, a mobile filter sheet, plus the storefront product card, quick view and compare tray and table. - [Store merchandising](https://docs.nasaqui.com/components/store-merch.md): Storefront home blocks: category tiles, hero and promo banners, a flash-deal strip with a live countdown and stock progress, a reusable product carousel for related and recently viewed items, and a brand strip. - [StoreOrderTimeline](https://docs.nasaqui.com/components/store-order-timeline.md): The order status timeline shared by the customer account and the store admin. The tracking variant draws placed, paid, shipped, out for delivery and delivered with times and a carrier link. The activity variant lists every event newest first and takes internal notes. ## Components: Typography - [Markdown](https://docs.nasaqui.com/components/markdown.md): Renders GitHub-flavoured Markdown in Nasaq typography, with bidi-aware blocks, CodeBlock for code and no raw HTML. - [Num](https://docs.nasaqui.com/components/numeric.md): Locale-aware number and date formatting with a fixed digit set (Western by default), tabular figures and bidi isolation. Num, DateTime and their string helpers. - [SectionHeader](https://docs.nasaqui.com/components/section-header.md): Title row of a page section: heading, one line of context and an optional action at the inline end. Separates sections without bordered cards. - [Text](https://docs.nasaqui.com/components/text.md): Typography roles (display to code) as one polymorphic component, plus the Kbd keyboard-key chip. - [Text effects](https://docs.nasaqui.com/components/text-effects.md): Small motion effects for words on marketing and product pages, a flipping phrase, a shimmer, a marquee, a word by word reveal and handwritten notes and marks. All of them hold still under reduced motion and never split Arabic into letters. ## Components: Utilities - [Barcode](https://docs.nasaqui.com/components/barcode.md): One-dimensional barcodes drawn as SVG with jsbarcode (Code 128, EAN-13, EAN-8, UPC-A, Code 39, ITF, Codabar, Pharmacode), with input validation that explains the problem, SVG and PNG download and a generator card. - [Countdown](https://docs.nasaqui.com/components/countdown.md): A drift-free countdown hook, a timer ring with phase colours, the mm:ss readout, cycle dots, and an idle-time prompt for time that passed while you were away. - [Hooks](https://docs.nasaqui.com/components/hooks.md): Small client hooks used across apps; useDebounce and useDebouncedCallback for search and autosave, useMediaQuery and useIsMobile for responsive logic, and useInfiniteScroll for loading the next page near the end of a list. - [Icon](https://docs.nasaqui.com/components/icon.md): lucide icon wrapper that mirrors direction-bearing glyphs in RTL, plus the bidi helpers Ltr, Bdi, BidiText and isolate. - [QrCode](https://docs.nasaqui.com/components/qr-code.md): QR code drawn as SVG in the browser with dot, rounded or square modules, three eye styles, a centre logo slot, token or prop colours and SVG or PNG download, plus a full generator card. - [Linkify](https://docs.nasaqui.com/components/text-utilities.md): Small text helpers for user content. Linkify safe links, bidi-isolated UserText, a translation toggle, scroll fades, an optimistic save button and progressive reveal. - [Translations](https://docs.nasaqui.com/components/translations.md): App strings for the Nasaq locale: TranslationsProvider and useT() give t(key, vars) over your dictionaries, with nested and namespaced keys, interpolation, CLDR plurals, locale fallback, a remembered choice and seedLocale for server defaults. ## Components: Website - [Blog index](https://docs.nasaqui.com/components/blog-index.md): A blog landing page: featured post, search, category and tag filters, post cards with cover, date and reading time, and pagination. - [Blog post](https://docs.nasaqui.com/components/blog-post.md): A post page: cover, byline, reading progress bar, sticky table of contents with scroll-spy, rich Markdown body with callouts and code, share, tags, author, previous and next, related posts and a comments slot. - [CookieConsent](https://docs.nasaqui.com/components/cookie-consent.md): Cookie consent banner and preferences dialog with Consent Mode categories. Reject and Accept carry equal weight, and it holds no tracking code. - [FeatureStory](https://docs.nasaqui.com/components/feature-story.md): One feature told as copy plus a picture, side by side above 48rem of container width; alternate with reverse to build a product page. - [LegalPage](https://docs.nasaqui.com/components/legal-page.md): A legal document page with a switcher between documents, the updated date, a draft notice, numbered sections with copyable anchors and a section rail. - [Marketing sections](https://docs.nasaqui.com/components/marketing-sections.md): Building blocks for a product page. How it works steps, a feature grid, a closing call to action banner, credit packs, aurora and grid backgrounds, a hero with an app mockup and a scripted AI session that plays back. They sit beside the existing feature story, plan cards and testimonials. - [Personal widgets](https://docs.nasaqui.com/components/personal-widgets.md): Small widgets for a personal site: availability badge, local clock with working-hours state, social links, now list, stats, skills and weather. - [Profile page](https://docs.nasaqui.com/components/profile-page.md): A two-column profile page: an identity column (avatar, name, handle, links, one action, bio, widgets) beside about, experience, skills, projects, writing and testimonials. The owner also sees their apps and account details. - [Testimonials](https://docs.nasaqui.com/components/testimonials.md): A public form for people to leave a testimonial with a rating and consent, and a display as masonry wall, equal grid or spotlight, with a menu for moderation. - [TypingTerminal](https://docs.nasaqui.com/components/typing-terminal.md): A terminal that types commands and prints their output step by step, for hero sections and docs. Renders the full transcript first, for servers and reduced motion. ## Components: Wellness - [Daily Summary](https://docs.nasaqui.com/components/daily-summary.md): One day at a glance with water, meals by safety, caffeine by kind, focus sessions, shutdown violations, steps, sleep, energy, heart rate and weight, plus a day switcher. - [Engine Card](https://docs.nasaqui.com/components/engine-card.md): One Health Debug protocol engine's live state as a card, with a state badge, the engine's readout and its log action. Seven engines, one component. - [Engine Details](https://docs.nasaqui.com/components/engine-details.md): One protocol engine's own page with its live card, per-day history, record timeline and the fixed protocol it follows. - [Health Reports](https://docs.nasaqui.com/components/health-reports.md): Health reports over a period with averages that skip missing days, a one-figure trend chart, meals and caffeine per day, and each engine's days on and off protocol. - [CupTracker](https://docs.nasaqui.com/components/health-trackers.md): Daily health trackers. A unit-count cup row, pinned quick-log strip, classified food catalogue, item builder with an entry-completeness ring and a flagged entries disclosure. - [Vitals](https://docs.nasaqui.com/components/vitals.md): Body readings from a scale or wearable with BMI and its category, plus progress towards the targets the person set. ## Components: Workflow - [ApprovalQueue](https://docs.nasaqui.com/components/approval-queue.md): A review queue of things waiting for a person to approve, reject with a reason, or convert to a task. It handles expiry, review criteria and redacted arguments. - [CronBuilder](https://docs.nasaqui.com/components/cron-builder.md): A schedule editor with simple settings or a cron expression, a plain-language reading in English and Arabic, field-level validation, and the next runs in a chosen time zone. Ships a schedule list with ran, failed and missed status. - [KillSwitch](https://docs.nasaqui.com/components/kill-switch.md): One control that stops every automation with a required reason, plus a banner that shows the paused state and a list of paired browsers to unpair. - [RuleBuilder](https://docs.nasaqui.com/components/rule-builder.md): An IFTTT style rule editor with an event trigger, nested all-of and any-of condition groups, and an ordered list of actions, read back as a plain-language sentence with the missing pieces listed. - [RunHistory](https://docs.nasaqui.com/components/run-history.md): A runs list with status filter and search beside a run detail showing per-step state, timings, input, output, logs and screenshots, the failing step, a span timeline with attributes, and the raw payload. - [StepEditor](https://docs.nasaqui.com/components/step-editor.md): A linear, sortable, nestable step list with forms generated from each step type, continue-on-failure, a parameters editor with secret values, a node picker for adding steps, problem checking and a test-run panel. - [Test Run Stream](https://docs.nasaqui.com/components/test-run-stream.md): A test run that streams. Run and Stop, each step appearing and updating in place as the server reports it, a live elapsed time and summary, and what the run saved, with its raw data behind a toggle. - [Workflow canvas](https://docs.nasaqui.com/components/workflow-canvas.md): Editable workflow graph with status nodes, a what-happens-next picker, a config side panel, minimap, validation, versions and an execution overlay with replay. - [Workflow marketplace](https://docs.nasaqui.com/components/workflow-marketplace.md): A store of workflow steps and ready-made presets with search, categories, a kind switch, a detail sheet and install, built on the shared catalog store. - [Workflow network](https://docs.nasaqui.com/components/workflow-network.md): Read-only process diagram of step cards joined by measured connectors, with decision, human and result kinds, that wraps by width and follows the reading direction. - [Workflow Views](https://docs.nasaqui.com/components/workflow-views.md): One workflow shown three ways from the same nested steps. A numbered outline with loops and labelled branches, a pipeline diagram, and your editor, with a view switch that can remember the choice. ## Optional - [Full text](https://docs.nasaqui.com/llms-full.txt): every guide and component manual in one file - [shadcn registry](https://docs.nasaqui.com/r/registry.json) - [Website templates](https://docs.nasaqui.com/templates): complete bilingual sites built with Nasaq in Nasaq Studio, from the CircleXO template store