GBC UI kit

The shared look for every gbctools.com tool. Install a piece with one command. Rules: the hub's DESIGN.md.

gbc-theme

npx shadcn@latest add https://kit.gbctools.com/r/gbc-theme.json

Light

Theme names (switch with light/dark)

background
card
primary
secondary
muted
accent
destructive
sidebar

Brand palette

peach
peach-l
peach-d
peach-x
cream
cream-2
grey-0
grey-1
grey-2
grey-3
grey-4
up
dn

gbc-card

Normal text on a card.

Small print and hints.

DoneIn progressFailedWaiting
Text on peachOutline

Dark

Theme names (switch with light/dark)

background
card
primary
secondary
muted
accent
destructive
sidebar

Brand palette

peach
peach-l
peach-d
peach-x
cream
cream-2
grey-0
grey-1
grey-2
grey-3
grey-4
up
dn

gbc-card

Normal text on a card.

Small print and hints.

DoneIn progressFailedWaiting
Text on peachOutline

gbc-font

npx shadcn@latest add https://kit.gbctools.com/r/gbc-font.json

Light

Sign-in title, 800

Page title, 600

Section title, 600

Normal text, 400. The quick brown fox jumps over the lazy dog.

Small print, 400 muted

App name, 700

Dark

Sign-in title, 800

Page title, 600

Section title, 600

Normal text, 400. The quick brown fox jumps over the lazy dog.

Small print, 400 muted

App name, 700

ui-basics (includes cn())

npx shadcn@latest add https://kit.gbctools.com/r/ui-basics.json

Light

BadgeSecondaryOutlineDestructive
Card title
Card description in muted text.
ServiceCount
Sat 5:00212
Sun 9:00348

Dark

BadgeSecondaryOutlineDestructive
Card title
Card description in muted text.
ServiceCount
Sat 5:00212
Sun 9:00348

brand-mark

npx shadcn@latest add https://kit.gbctools.com/r/brand-mark.json

Logo: the GBC Tools mark (/gbc-logo.svg, 512px PNG at /gbc-logo.png).

Light

GBC Tools
GBC Tools

Dark

GBC Tools
GBC Tools

auth-shell

npx shadcn@latest add https://kit.gbctools.com/r/auth-shell.json

Light

GBC Tools

Sign in

GBC Tools

Dark

GBC Tools

Sign in

GBC Tools

app-shell (includes brand-mark, tool-switcher)

npx shadcn@latest add https://kit.gbctools.com/r/app-shell.json

The page frame is a whole screen, so it has its own demo: open the app-shell demo. Try it at phone width, and use its Light/Dark chip (saved in the shared gbc_theme cookie).

tool-switcher

npx shadcn@latest add https://kit.gbctools.com/r/tool-switcher.json

Shown in the app-shell demo: "Switch tool" in the sidebar, and a Tools list in the phone menu.