Skip to content

UI Examples

Screenshots follow the theme you are reading this page in - switch it with the toggle in the header. Click any image to open it full screen.

Dashboard

Every route as a launchable app, grouped into categories, with live health on each card and a second line only when something is wrong.

DashboardDashboard

Switch the categories to an icon grid under Settings - Interface - Dashboard categories, and the dashboard becomes an app launcher.

Dashboard icon gridDashboard icon grid

Routes

Card and list views over every router Traefik knows about, from every provider, with the stat panel and entry points above.

Routes card viewRoutes card viewRoutes list viewRoutes list view

Adding a route is a slide-in form. HTTP routes get domains, backends, load balancing, entry points and middlewares; TCP and UDP get what applies to them and nothing else.

Add HTTP routeAdd HTTP routeAdd TCP routeAdd TCP routeAdd UDP routeAdd UDP route

Middlewares

The same card and list treatment for middlewares, with usage counts, and a form that knows the config shape of every middleware type.

Middlewares card viewMiddlewares card viewMiddlewares list viewMiddlewares list viewAdd middlewareAdd middleware

Services

Every service with its backends, health and the routers using it.

Services card viewServices card viewServices list viewServices list view

Route Map

The full path of a request, entry point to backend, as a live diagram.

Route mapRoute map

Static Config

traefik.yml as editable cards: entry points, certificate resolvers, providers, plugins, API, logging, observability and system, with raw YAML one click away.

Static config tabStatic config tab

TLS Options

TLS profiles with minimum versions, cipher suites and mTLS, assignable per route.

TLS optionsTLS options

Certificates

Every certificate from every resolver, with expiry warnings.

CertificatesCertificates

Logs

The access log as clickable analytics: status codes, response times, methods, domains, paths, clients and services, where every count is a filter.

Access logsAccess logs

CrowdSec

The attack surface: who is probing, from which networks and countries, with what tooling, and whether CrowdSec absorbed it.

CrowdSecCrowdSec

Plugins

Installed Traefik plugins with the middlewares using each one, and a guided install straight from the catalog.

PluginsPluginsInstall a pluginInstall a plugin

Settings

Interface, authentication with API keys and OIDC, backups, system and route monitoring, and the connection to Traefik itself.

Interface settingsInterface settingsAuthentication settingsAuthentication settingsAPI keysAPI keysOIDC and SSOOIDC and SSOBackupsBackupsSystem monitoringSystem monitoringRoute monitoringRoute monitoringConnection settingsConnection settingsAboutAbout

Setup Wizard

First run walks through everything in one pass: the Traefik connection, a route for the manager itself, which monitoring tabs to show, CrowdSec, git backup, notifications and the admin password.

Setup wizard welcomeSetup wizard welcomeSetup wizard Traefik connectionSetup wizard Traefik connectionSetup wizard self routeSetup wizard self routeSetup wizard monitoring tabsSetup wizard monitoring tabsSetup wizard CrowdSecSetup wizard CrowdSecSetup wizard git backupSetup wizard git backupSetup wizard notificationsSetup wizard notificationsSetup wizard admin passwordSetup wizard admin password

Android

The companion app, connected to the same instance.

OverviewOverviewRoutesRoutesRoute detailRoute detailAdd a routeAdd a routeEdit a routeEdit a routeMiddlewaresMiddlewaresMiddleware detailMiddleware detailAdd a middlewareAdd a middlewareEdit a middlewareEdit a middlewareServicesServicesService detailService detailAccess logsAccess logsLog entry detailLog entry detailCrowdSecCrowdSecAdd a decisionAdd a decisionCertificatesCertificatesPluginsPluginsPlugin detailPlugin detailDynamic config backupsDynamic config backupsStatic config backupsStatic config backupsGit backupsGit backupsNavigation drawerNavigation drawerSettingsSettings

Tablet

The tablet layout swaps the bottom bar for a navigation rail and puts the list and the detail side by side.

OverviewOverviewRoutesRoutesRoute detailRoute detailAdd a routeAdd a routeEdit a routeEdit a routeMiddlewaresMiddlewaresMiddleware detailMiddleware detailAdd a middlewareAdd a middlewareEdit a middlewareEdit a middlewareServicesServicesService detailService detailAccess logsAccess logsLog entry detailLog entry detailCrowdSecCrowdSecAdd a decisionAdd a decisionCertificatesCertificatesPluginsPluginsPlugin detailPlugin detailDynamic config backupsDynamic config backupsStatic config backupsStatic config backupsGit backupsGit backupsNavigation drawerNavigation drawerSettingsSettings