Namefi · Design System
At a glance
The shared building blocks — tokens and base components from @namefi-astra/ui. Reuse these instead of inventing one-off styles. Every sample below renders the real component, so this page always reflects what ships.
Foundations
Colors
Semantic
12 tokensBrand
3 tokensChart
5 tokensFoundations
Typography
DisplayOwn your name onchain
Heading 1Domains, decentralized
Heading 2One place to manage it all
Heading 3A section heading
BodyThe quick brown fox registers example.eth onchain.
SmallMuted caption text for metadata.
Monoconst domain = "namefi.io";
Foundations
Radius
sm
md
lg
xl
2xl
full
Components
Button
Variants
default
outline
secondary
brand-solid
brand-outline
ghost
destructive
link
Sizes
xs
sm
default
lg
States
default
disabled
Components
Badge
Variants
defaultdefault
secondarysecondary
destructivedestructive
outlineoutline
ghostghost
linklink
Components
Alert
Variants
Auto-renew is on
This domain renews automatically before it expires.
Payment method expired
Update your card to keep auto-renew active.
Components
Card
Onchain ownership
Your domain is an NFT you fully control.
Transfer, list, or build on it — no registrar lock-in.
Components
Input & Textarea
Input states
default
disabled
invalid
With label
Components
Checkbox & Switch
Checkbox
unchecked
checked
disabled
Switch
off
on
disabled
Components
Select
States
default
disabled
Components
Tabs
Variants
Snapshot of the domain.
Snapshot of the domain.
Components
Tooltip
Placement (shown open)
top
bottom
Components
Avatar
Sizes
NFsm
NFdefault
NFlg
NFimage
Components
AddressWithChain
Inline
0xd8dA...6045
short addressvitalik.eth
ENS name-
no addressPill
0xd8dA...6045read-only
selectable
empty
Components
Separator & Skeleton
Separator
Account
Billing
DocsAPIStatus
verticalSkeleton