dev-dga

Blocks

Prebuilt blocks, assembled from the primitives.

A tier above components: full sections you drop into a page - forms, stats, tables - composed only from dev-dga components. Preview each live in your theme and direction, then copy the code.

Dashboards & data

Overview surfaces that put metrics, charts, and records front and center.

3 examples

Analytics dashboard

A dashboard section: a KPI row, a trend line chart, a channel donut, and an activity timeline - all responsive.

Performance overview

Open requests
1,284
+12%
vs last month
Completed this month
18,592
+8%
vs last month
Satisfaction
96%
+3%
vs last month

Requests over time

  • Citizens
  • Business
Requests over time
SeriesJanFebMarAprMayJun
Citizens820932901109412301284
Business420480510560610690

Channel mix

  • Portal
  • App
  • Kiosk
  • Phone
Channel mix
SegmentValueShare
Portal4444%
App3030%
Kiosk1414%
Phone1212%

Activity

  1. Request #4821 was approved
  2. New commercial registration submitted
  3. Building permit moved to review
  4. Address update completed

Stats overview

A responsive KPI row: metrics with deltas and inline trend charts - the top strip of any dashboard.

Open requests
1,284
+12%
vs last month
Completed this month
18,592
+8%
vs last month
Avg. processing time
2.4 days
−0.5
vs last month
Satisfaction
96%
+3%
vs last month

Requests table

A data-table panel with a toolbar, status tags, applicant avatars, a sortable header, and a pager.

Recent requests

ApplicantServiceStatus
REQ-4821SASara Al-OtaibiCommercial registrationApproved
REQ-4820FMFaisal Al-MutairiBuilding permitIn review
REQ-4817NKNoura Al-QahtaniTrade licensePending
REQ-4805OHOmar Al-HarbiWork permit renewalApproved
REQ-4799LSLayla Al-SalemAddress updateIn review
Page 1 of 9

Forms & authentication

Everything a person fills in - sign-in, applications, and guided flows.

3 examples

Sign-in panel

A centered authentication card: labeled fields, a remember toggle, a primary action, and helper links.

Sign in to Masar

Use your national single sign-on to continue.

Forgot password?
Don’t have an account? Register

Multi-step application

A guided flow with a step indicator, per-step fields, and back / continue navigation.

New service request

Step 1 of 3
  1. ApplicantWho is applying
  2. DetailsAbout the request
  3. ReviewConfirm and submit

Service application

A two-column government form: text fields, selects, a description, delivery options, consent, and actions.

Apply for a service

Fields marked with an asterisk are required.

Delivery method

Marketing & pricing

Public-facing sections that explain, persuade, and convert.

3 examples

Hero & call to action

A landing hero: eyebrow, headline, supporting copy, two actions, and a trust row.

National single sign-on

Every government service, one trusted account.

Sign in once with Nafath and reach 200+ services across ministries - no forms to repeat, no queues to stand in.

200+Connected services
18MVerified citizens
99.9%Uptime

Pricing plans

Three responsive tiers with a monthly / annual switch, a highlighted plan, feature lists, and CTAs.

Simple, transparent pricing

Start free. Upgrade when your team grows. Prices in SAR, VAT excluded.

Starter

For small teams piloting a single service.

Free

  • 1 service portal
  • Up to 5 seats
  • Community support
  • Core components
ProfessionalMost popular

For agencies running services in production.

SAR499/month

  • Unlimited services
  • Up to 50 seats
  • Priority support
  • Analytics & audit log
  • SSO (Nafath)
Enterprise

For ministries with bespoke requirements.

Custom

  • Unlimited everything
  • Dedicated support
  • On-prem or private cloud
  • Custom SLAs
  • Security review

FAQ

A collapsible list of common questions built on the accordion.

Frequently asked questions

Answers to the things people ask most before they start.

A verified Nafath account and a registered mobile number. There is no separate password to remember.

Account & content

Settings, directories, and catalogs for signed-in experiences.

3 examples

Settings panel

A tabbed settings surface: a profile form, notification switches, and a security section.

Team directory

A responsive grid of member cards with avatars, roles, and a quick action.

Service team

The people behind Masar’s delivery.

SA

Sara Al-Otaibi

Product lead

View profile
FM

Faisal Al-Mutairi

Engineering

View profile
NK

Noura Al-Qahtani

Design

View profile
OH

Omar Al-Harbi

Operations

View profile

Service catalog

A responsive grid of service cards with featured icons, categories, and a call to action.

Popular services

Browse and start any government service in a few steps.

Business

Commercial registration

Register a new business and receive your CR number.

Open service
Housing

Building permit

Apply for construction and renovation permits.

Open service
Labor

Work permit renewal

Renew an existing work permit for an employee.

Open service
Transport

Vehicle registration

Transfer or renew vehicle ownership online.

Open service
Health

Health certificate

Issue and download an official health certificate.

Open service
Identity

Address update

Update your national address in one place.

Open service

Feedback & states

What the interface says when something happens - or nothing is there yet.

3 examples

Empty state

A zero-data placeholder with an icon, guidance, and a primary action.

No requests yet

When you submit a service request it shows up here, so you can track its status.

Loading state

Skeleton placeholders that mirror a card’s layout while its data loads.

Confirmation receipt

A success summary with a reference, a details list, and follow-up actions.

Request submitted

We’ve received your application. You’ll get an update by SMS.

Reference
REQ-4821
Service
Commercial registration
Submitted
Today, 10:24
Fee
SAR 350