NibCSS

Examples

Copy-ready patterns built with NibCSS: navigation, cards, pricing, alerts, empty states and more.

1 min readv1

Alert#

HTML
<div role="alert" nib="d=flex; g=12px; ali=flex-start; p=14px 16px; bdrd=12px; bgc=#fef2f2; cl=#991b1b; bd=1px solid #fecaca; w=340px">
  <strong nib="fls=0">!</strong>
  <div><div nib="ftw=700">Payment failed</div><div nib="fts=13px; mt=2px; opc=.85">Your card was declined. Try another one.</div></div>
</div>

Empty state#

HTML
＋
No projects yet Create your first project to get started. 
<div nib="d=flex; flxd=column; ali=center; txa=center; g=8px; p=32px; w=320px; bdrd=16px; bd=2px dashed #cbd5e1">
  <div nib="w=48px; h=48px; bdrd=14px; bgc=#EEEFFE; cl=#4F52D9; d=grid; pli=center; fts=22px">＋</div>
  <strong>No projects yet</strong>
  <span nib="fts=13px; cl=#64748b">Create your first project to get started.</span>
  <button nib="mt=8px; p=8px 14px; bdrd=8px; bd=none; bgc=#4F52D9; cl=#fff; ftw=600; cur=pointer">New project</button>
</div>

Avatar stack#

HTML
A B C +5 
<div nib="d=flex">
  <span nib="w=36px; h=36px; bdrd=999px; bgc=#4F52D9; cl=#fff; d=grid; pli=center; ftw=700; bd=2px solid #fff">A</span>
  <span nib="w=36px; h=36px; bdrd=999px; bgc=#0891b2; cl=#fff; d=grid; pli=center; ftw=700; bd=2px solid #fff; ml=-10px">B</span>
  <span nib="w=36px; h=36px; bdrd=999px; bgc=#16a34a; cl=#fff; d=grid; pli=center; ftw=700; bd=2px solid #fff; ml=-10px">C</span>
  <span nib="w=36px; h=36px; bdrd=999px; bgc=#e2e8f0; cl=#334155; d=grid; pli=center; fts=12px; ftw=700; bd=2px solid #fff; ml=-10px">+5</span>
</div>

Stat card#

HTML
Monthly revenue
$48,210
▲ 12.4% vs last month
<div nib="p=18px; w=220px; bdrd=14px; bgc=#fff; cl=#0f172a; bd=1px solid #e2e8f0; dark:bgc=#0f172a; dark:cl=#e2e8f0; dark:bd=1px solid #1e293b">
  <div nib="fts=13px; cl=#64748b">Monthly revenue</div>
  <div nib="fts=28px; ftw=800; mt=4px">$48,210</div>
  <div nib="fts=12px; ftw=700; cl=#16a34a; mt=4px">▲ 12.4% vs last month</div>
</div>

Toggle switch#

HTML
<label nib="d=inline-flex; ali=center; g=10px; cur=pointer">
  <input type="checkbox" nib="ap=none; w=40px; h=22px; bdrd=999px; bgc=#cbd5e1; pos=relative; cur=pointer; ts=background-color .2s; checked:bgc=#4F52D9; before:cnt=''; before:pos=absolute; before:t=3px; before:l=3px; before:w=16px; before:h=16px; before:bdrd=999px; before:bgc=#fff; before:ts=transform .2s; checked:before:tf=translateX(18px)">
  Notifications
</label>

Interactive recipes from the catalog#

Button

A clickable action.

actions
color:
size:
nib="d=inline-flex; ali=center; g=8px; bdrd=8px; cur=pointer; ftw=600; bgc=$color.primary; p=4px 10px; fts=12px"

Card

A bordered content container.

surfaces
size:

Interactive Card

This card adapts to tokens and responsive breakpoints.

nib="bgc=#fff; dark:bgc=#111; bd=1px solid #e5e7eb; dark:bd=1px solid #333; bdrd=16px; p=4px 10px; fts=12px"