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

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

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

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

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

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%

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