Component reference.

Every component in @queflyhq/authfi-ui — reconciled amber #ffc428, one motion scale, neon-pop tactility. Name and import on the left, live example on the right. Toggle the theme; hover, click, drag.

tokens: --motion / --easeNeoPOP plunder pressref: CRED · Bits UImobile-first

Foundations

Color

Cool-blue neutrals; one warm accent (amber). Semantic + region tokens are separate from the accent.

--brand · --region · --ok/warn/crit

Type & Motion

Humanist sans for prose, mono for identifiers. One duration + easing scale drives every transition.

--font-sans · --font-mono
40/700Display
15/400Body — humanist system sans
monoaws:123456 · P-142 · ttl 5m
fast 150base 240slow 360snapspring

Patterns — components wired together

App shell · multiple layouts

One shell (sidebar + header), many content layouts — Users = table, Roles = master-detail, Permissions = matrix. Click the sidebar; content swaps and transitions in.

Sidebar + Header + <layout outlet>
Users
MO

CRUD page

The repeatable resource-screen recipe — header + search + filter chips + select-all + bulk bar + row actions + create. Every list screen (Users, Roles, Keys) is this same pattern, only the columns change.

PageHeader + FilterBar + DataTable + BulkBar + Toast
Role slots
Manage cloud role grants
AllActiveDegraded
Role
Status
Region

Grant-role wizard (Sheet)

A guided flow in a side Sheet: pick user → role → duration → review → plunder grant. The Progress tracker drives the steps; the finish fires a Toast.

Sheet + Steps + Input/Select + Segmented + Button + Toast
opens a 4-step side sheet

Access request

Approve inline; Details expands a Timeline of the request. On approve, the linked Status flips to Active and a Toast fires — one shared status token keeps the badge identical everywhere.

Approval + Timeline + Status + Toast
Access request
Aarav Sharma requests AWS PowerUser on prod for 1 hour.
ap-south-1Pending

Access graph & policy

Access graph

Who can reach what — Users → Groups → Roles → Resources (apps, servers, DBs, cloud). Hover any node to trace its directional access path; dimmed nodes are outside it.

import { AccessGraph }
Hover a node to trace access.

Policy editor

Edit IAM policy as JSON — effect / actions / resources / conditions. Visual + code modes in the app.

import { PolicyEditor }
policy.json✓ valid

Natural-language policy · AI

Describe access in plain English; the AI drafts the policy. Type a request and Generate.

AI tab · NL → policy

IaC alongside console

Every console action has an equivalent in code — do it in the UI, copy the Terraform. Identity as code.

import { IaCPanel }
Console
aws:PowerUser → prodttl 1h · keyless · MFA
Active
Terraform
main.tf
resource "authfi_grant" "prod" {
  role = "aws:PowerUser"
  ttl  = "1h"
  mfa  = true
}

Motion — FLIP layout & gestures

Layout animation (FLIP)

Items fly between positions when the list reorders — the same technique Motion's layout prop uses. Shuffle or sort to watch them move.

import { motion } from 'motion'

Spring drag

Drag the tile — it follows your pointer, then springs back to centre with inertia on release.

gesture + spring physics
drag me

Actions

Button

Every variant is neon-pop — an isometric edge that depresses on click, plus a glow. Click Grant/Enroll for the loading→success animation.

import { Button } from '@queflyhq/authfi-ui'
plunderprimarybrandsecondaryghostdanger
Copy

ButtonGroup

Joined tactile cluster for a single choice or toolbar; the whole group depresses on press.

import { ButtonGroup }

Quick actions

A launcher of the most common operations — hover to lift, click to run. Pairs with ⌘K for power users.

import { QuickActions }
Invite user
add a teammate
Grant role
keyless, timed
Rotate secret
force new key

Badge

One component, a tone. Region uses teal + mono; a live dot pulses; counts pop in.

import { Badge }
DraftActiveDegradedSuspendedPending
ap-south-1+1 seat

Status

The canonical lifecycle states — a dot tone + label, used consistently across tables, cards and headers.

import { Status }
Active Inactive Disabled Pending Provisioning Pending deletion

Avatar · AvatarGroup · Tooltip

Initial or image; groups overlap and lift on hover. Tooltips fade up on hover/focus.

import { Avatar, Tooltip }
AS
MI
DB
+12
ap-south-1Data never leaves this region
Seats used
1,240/2,000

Form & controls

Form · layout & validation

A composed form — grouped fields, required marks, inline validation (error + success), a toggle, and a submit that runs the loading→saved animation.

import { Form, Field }
Identity
Enter a valid email address
Access
Within policy limits

Input · Select

Text, search-with-icon, and a keyboard-navigable Select with a spring dropdown.

import { Input, Select }
AWS PowerUser

Switch · Checkbox · Radio · Segmented · Slider · OTP

Every control shares the spring easing — toggle thumb, segmented thumb, OTP pop, slider fill.

import { Switch, OtpInput, Slider }
MFA
Invite
Humans

Upload · Dropzone

Drag files onto the zone (or click to browse) — the zone lifts on drag-over, then each file shows live progress and a done state.

import { Dropzone }
Drop files here
or browse · SVG, PNG, CSV up to 10MB

Checkbox group · Radio group

Grouped multi-select and single-select; each group tracks its own value.

import { CheckboxGroup, RadioGroup }
Scopes
Environment

Tags · TagGroup

Type + Enter to add a tag; click ✕ to remove. Read-only tag groups for labels & scopes.

import { TagInput, TagGroup }
ap-south-1pci-dsssoc2production

Inline edit

Click a value to edit in place — Enter saves, Esc cancels. Also wired into the DataTable (click a role name).

import { InlineEdit }
Display namePlatform Engineering
Session TTL1h

Dates & progress

Calendar · DatePicker

Month grid with prev/next, a today marker and a selected day.

import { Calendar }

TimePicker

Hour / minute / meridiem columns; the choice snaps highlighted.

import { TimePicker }
Selected: 09 : 30 AM

ProgressBar

Determinate linear + circular; both animate to value on reveal.

import { Progress }
Migration0%
Indexing0%
0%

Progress tracker

Multi-step flow — done / active / pending with an amber connector. Advance to fill it.

import { Steps }

People & collaboration

User · UserGroup

A person cell (avatar + name + email + status) and a group cell (icon + member stack).

import { UserCell, GroupCell }
AS
Aarav Sharmaaarav@acme.com
Active
Platform Engineering12 members · 4 roles
MI
DB
+10

UserPicker

Search + multi-select people as removable avatar chips.

import { UserPicker }

Comments

A threaded discussion with avatars, actions, and a composer. Post to add your own.

import { Comments }

User profile

Profile header — cover, avatar, identity + status, quick stats, and tabs.

import { ProfileHeader }
AS
Aarav Sharma Active
aarav@acme.com · Platform Engineering · ap-south-1
4Roles
12Sessions
98%MFA

Timeline · Activity

Vertical activity feed with coloured nodes — audit trails, request history, session events.

import { Timeline }
Signed in
10:24 · ap-south-1 · passkey
Granted aws:PowerUser
10:31 · approved by you · ttl 1h
MFA re-challenge
11:02 · new device
Session expired
11:31 · auto

Overlays & feedback

Modal · Confirm (type-to-confirm) · Toast

Backdrop fades, panel springs in. Destructive deletes require typing the resource name (AWS-style).

import { Modal, ConfirmDialog, toast }

Command palette · Notifications

⌘K opens a filterable command list (arrow-nav). The bell opens a notification panel.

import { CommandPalette, NotificationBell }
3

Approval

An access request inline in the notification panel — Approve (plunder) or Deny, with a result state.

import { ApprovalCard }
Access request
Aarav Sharma requests AWS PowerUser on prod for 1 hour.
ap-south-1keyless · 1h

Alert · Banner · Accordion

Four alert tones, a dismissible brand banner, and a smooth grid-rows accordion.

import { Alert, Banner, Accordion }
Access granted
Effective in ap-south-1 · 1h
What is region residency?

Every region is a separate in-region deployment — tenant data never leaves it.

Data & visualization

DataTable · CRUD

Hover a row for quick actions (edit / delete). + New adds a row; delete asks to type-to-confirm. Scales to 500k rows with windowing.

import { DataTable }
Role slots · 0
Role
Status
Region

Rich DataTable · view switcher

One dataset, four layouts — Table, Cards, Board (by status), Compact. Switch views; each transitions in, so a dense screen can pack many things together.

import { DataView }

StatCard · Charts · Bento

KPIs count up; charts draw themselves when scrolled into view; bento tiles lift on hover.

import { StatCard, Chart, Bento }
ACTIVE USERS0↑ 4.2% this week
MRR$48.2k
Seats1,240
Regions6
MFA coverage98%

Layout, cards & lists

Screen layouts · Grids

Responsive scaffolds — sidebar shell, split, auto-fill grid — that reflow on any screen.

import { Grid, Split }
Sidebar shell
nav
header
content
Split
list
detail
Auto grid
1
2
3
4
5
6

Card · CardGrid

Content cards that lift on hover; drop them into an auto-fill grid.

import { Card }
SSO

SAML, OIDC & SCIM for every app.

Cloud access

Keyless AWS, GCP, Azure roles.

Detection

eBPF runtime enforcement.

List with actions menu

Each row reveals a ⋮ menu on hover — edit / duplicate / delete.

import { ActionList }

Box · Panel

The surface primitives everything sits on — default, inset, elevated, brand.

import { Box, Panel }
Defaultsurface + hairline
Insetrecessed well
Elevatedfloating shadow
Brandamber callout

Header · Menu bar

App topbar with dropdown menus + avatar. Click a menu to open it.

import { Header, MenuBar }
MO

App surfaces

LogViewer

Streaming, level-coloured logs with a live indicator; new lines rise in and auto-scroll.

import { LogViewer }
live · authfi-connect · ap-south-1

AI chat panel

Assistant conversation — bubbles, avatars, a typing indicator. Send a message.

import { ChatPanel }

Web terminal · PAM session

Launch a keyless, recorded shell into a VM — SSH in the browser. Click launch, then type: whoami, ls, uptime, exit.

import { WebTerminal }
keyless · MFA · recorded · ap-south-1

Secrets & connections

API keys · Secrets

Reveal-once secrets — masked by default; reveal, rotate (mints a new value), revoke. New keys are shown a single time.

import { KeyManager }
Active keys

Connections hub · Catalogue

Browse integrations and connect — cards lift on hover, the Connect button animates into a connected state.

import { ConnectionCatalog }

Hierarchy, states & residency

Tree

Collapsible hierarchy — org units, groups, resource trees. Click a folder to expand.

import { Tree }

Empty · Error · 403

The three states every list and page needs — nothing yet, load failed, and permission denied.

import { EmptyState }
No roles yet

Create your first role slot to grant cloud access.

Couldn't load

The region endpoint timed out.

403 — no access

You need admin:roles to view this.

Region map · Residency

Where data lives — pulsing region pins over a grid. Teal = active residency, amber = your primary.

import { RegionMap }
us-east-1
eu-west-1
ap-south-1
ap-southeast-2

Error pages · animated

Full-page 404 / 500 — a floating gradient code over a drifting grid, with a way back.

import { ErrorPage }
AuthFI
404
Lost in the mesh

That resource isn't in this region.

AuthFI
500
Something broke

The control plane hiccuped — we're on it.

Data residency · region picker

Region picker

Create a project in any of 50+ regions across every cloud and continent — data stays resident there. Search, filter by cloud, pick one; grouped by continent with live latency.

import { RegionPicker }
All cloudsAWSGCPAzureOCI

Editors & pickers

Combobox · Autocomplete

Type to filter; matches highlight; pick to fill. For roles, regions, resources.

import { Combobox }

Date-range picker

Click a start day, then an end day — the range fills. For audit windows & reports.

import { DateRange }
Range: —

Key-value editor

Edit attribute maps — SCIM claims, policy conditions, metadata. Add / remove rows.

import { KeyValueEditor }

Diff viewer

Before/after for policy & config changes — additions green, removals red.

import { Diff }
{
"role": "aws:PowerUser",
- "ttl": "8h",
+ "ttl": "1h",
- "scope": "billing:admin"
+ "scope": "billing:read"
}

Charts

Line · Area · Sparkline

Trend charts that draw themselves on scroll-in — stroke reveal + fill fade.

import { Chart }
Line
Area
Sparkline

Bar · Stacked · Gauge · Donut

Categorical + radial charts; bars grow with a staggered spring, the gauge and donut sweep.

import { Chart }
Bars
Stacked
Gauge
Donut

Interaction

DragList

Map roles by dragging between columns — spring drop, only the dragged item animates. Keyboard: focus a chip, press Enter.

import { DragList }
Available0
Assigned0

Content & dev

CodeBlock · Terminal · List

Copyable code, a live terminal with blinking cursor, and hoverable list rows.

import { CodeBlock, Terminal, List }
grant.ts
await authfi.access.grant({ role: "aws:PowerUser", ttl: "1h" })
bash
$ authfi login
✓ signed in · ap-south-1
Productionaws · ap-south-1
Staginggcp · asia-south1

Flow templates

Login / greeting flow

Staged fade-up → plunder continue → OTP (region hint) → drawn-check reward → greeting.

routes/login
A

Sign in

to continue to Acme

White-label login

Same flow; the tenant sets brand / edge / on-brand. Click a tenant to reskin instantly.

brand tokens per tenant
A

Acme

Secure, passwordless access

Brand — logo kit

ProviderLogo

Every cloud, IdP, tool & AI as one component — 459 marks, per-theme variants, assets at /icons/svgl.

import { ProviderLogo }

Grant cloud role?

Aarav gets AWS PowerUser on prod, keyless, for 1 hour — in ap-south-1.

Delete role slot?

This revokes it for all 12 members of Platform Engineering. This can't be undone.

Access granted
effective in ap-south-1 · 1h

Grant a role

keyless · time-boxed · ap-south-1