Authkit
authkit.com/
AuthKit is a pre-built login interface, developed jointly by WorkOS and Radix UI, that developers drop into an app to handle sign-in flows (SSO, MFA, social login, magic links) instead of building the UI from scratch, with branding fully customizable down to color, logo, corner radius, and button styling. The homepage opens with three working interactive login-box examples under different fictional app names rather than static screenshots, letting a visitor toggle light and dark mode on each. It explicitly credits its component foundation by name, noting Radix is “used by Vercel, Linear, Supabase, and thousands of others,” and includes two named customer testimonials describing specific technical tradeoffs (UI control, freed engineering time) rather than general praise.
- Category
- Engineering & Infrastructure
- Style
- DarkMinimal
- Stack
- Next.js
- Fonts
- Untitled SansaeonikPro
- Palette
- Meta title
- AuthKit by WorkOS
- Sections
- 4
- Updated
Authkit's landing page, section by section
Each section below is cropped straight from Authkit's live page — useful references for engineering & infrastructure landing page design.
Authkit design review: how the homepage is built
The page runs 8316 pixels as one continuous near-black canvas, with every headline in a pale glowing blue and small gray body copy. Thin grid lines with dot markers, not background changes, separate sections. The hero is a lone product name, then an icon row, a circuit-board diagram, a customisation demo, a Radix section, a security grid, a platform diagram, two quotes and a two-card closer, with no footer.
Above the fold
The top bar holds a gray "WorkOS" wordmark at left, a centred logo mark, and a round GitHub icon beside a pill reading "Get started". Under a small "Introducing" label, the single word "AuthKit" fills the middle of the screen in huge gradient type, with the subhead "The world’s best login box, powered by WorkOS + Radix." below. A translucent login card titled "Sign in to SuperApp" rises from the bottom edge, with an email field, "Continue" and two social buttons.
Icon row, circuit diagram and customisation demo
A theme toggle sits above "Light and dark modes supported." Six icons then run in a connected line from "Single Sign-On" to "Magic Auth". Under the label "Extensible by design", "Your users. Your data. Maximum flexibility." leads into a circuit-board illustration with chips tagged "AuthKit", "WorkOS", "User Management", "Your Application", "Your Database" and "Events API". "Your brand. Your style." opens a browser-frame demo around a purple "Continue" button, ringed by floating panels for "Colour", "Radius", "Logo icon" and favicon upload.
Radix and the security grid
"Built on Radix, the most popular open source design system." names Vercel, Linear and Supabase beneath it. A collage of blurred glass shapes, code snippets, a six-box code entry and three "Reset password" buttons fills the width, ending in a "Learn more about Radix" pill. "Designed for developers. Built for the enterprise." follows with five cards in a three-over-two arrangement, each an illustration over one label, from "Leaked password protection" to "Multi-Factor Authentication".
Platform diagram, quotes and closing cards
"The one platform, for years of growth." sits above a chip diagram labelled "Email & Password", "Social Login", "Multi-Factor Auth", "Single Sign-On" and "Directory Sync", then a "Learn more about WorkOS User Management" pill. Two bordered quote cards follow, one from Sean Rose of Meter and one from Mokhtar Bacha of Formal. "Start building today" ends the page with two cards, "Use hosted AuthKit" and "View code on GitHub", and a "Follow @AuthKit on" pill.
On mobile
At 390 pixels the top bar keeps "WorkOS", the logo and "Get started", and the GitHub icon drops out. The login card fills the width. The icon row wraps into two rows of three, with "Role-Based Access Control" shortened to "RBAC". Headlines break across three or four lines and the five security cards become one tall column.
Worth borrowing
- Using a single oversized product name as the hero lets one word carry the whole first screen.
- A live-looking login card with floating setting panels around it demonstrates customisation instead of describing it.
- Illustrating each security feature as a tiny hardware gadget makes abstract features easy to tell apart.
