OCN-00
Registry lab
editable source / controlled tokens / react
Oceania
A component registry dressed like a specimen catalog. Install editable React source, keep the Figma token grammar, and inspect every primitive while the registry stays fast to scan.
12
UI components
02
Shared assets
14
Registry files
Live specimen
registry receipt
Install the source. Keep the system.
Tokens
HSL
Runtime
React
Install
CLI
Controls are shown as working specimens, not screenshots.
01
Install
A registry page should feel operational.
The install flow stays direct, with commands framed as part of the same token-backed system rather than generic docs filler.
Quick start
pnpm installpnpm --filter @oceania/registry devnpx shadcn@latest add https://oceania.praks.me/r/button.jsonToken import
If the CLI does not add the token file automatically, import it from the consuming app global stylesheet.
@import "./oceania-tokens.css";npx shadcn@latest add https://oceania.praks.me/r/button.jsonnpx shadcn@latest add https://oceania.praks.me/r/input.jsonnpx shadcn@latest add https://oceania.praks.me/r/textarea.jsonnpx shadcn@latest add https://oceania.praks.me/r/checkbox.jsonnpx shadcn@latest add https://oceania.praks.me/r/radio-group.jsonnpx shadcn@latest add https://oceania.praks.me/r/switch.jsonnpx shadcn@latest add https://oceania.praks.me/r/slider.jsonnpx shadcn@latest add https://oceania.praks.me/r/select.jsonnpx shadcn@latest add https://oceania.praks.me/r/tabs.jsonnpx shadcn@latest add https://oceania.praks.me/r/breadcrumb.jsonnpx shadcn@latest add https://oceania.praks.me/r/pagination.jsonnpx shadcn@latest add https://oceania.praks.me/r/tooltip.json02
Tokens
Palette as evidence, not decoration.
The token strip is intentionally blunt: names, variables, and usage hints, all pulled from the Oceania palette.
Action
--oc-primary
Command color
Active
--oc-primary-active
Pressed state
Ink
--oc-text-900
Primary copy
Signal
--oc-error-500
Exception state
Wash
--oc-primary-50
Soft field
Caption
--oc-text-500
Secondary copy
04
Forms
Forms get the full inspection table.
Shapes, failure states, captions, and longer text entry are staged together so their border grammar can be compared quickly.
Shape matrix
npx shadcn@latest add https://oceania.praks.me/r/input.jsonSharp
Cornered
Rounded
Field copy
Used for release notes and registry updates.
Username does not match the workspace.
Long form
npx shadcn@latest add https://oceania.praks.me/r/textarea.json05
Selection
Small decisions, visible states.
Checkbox, radio, and switch controls sit in a dark specimen tray so selected and disabled states have more contrast.
Checkbox
npx shadcn@latest add https://oceania.praks.me/r/checkbox.jsonRadio
npx shadcn@latest add https://oceania.praks.me/r/radio-group.jsonSwitch
npx shadcn@latest add https://oceania.praks.me/r/switch.json06
Range
A single control with room to breathe.
The slider gets a wide bench because range controls need visual space for motion, value, and hand feel.
Allocation
npx shadcn@latest add https://oceania.praks.me/r/slider.json07
Dropdown
Select keeps the input grammar.
The dropdown trigger uses the same border behavior as the text fields, so forms stay systematic.
Trigger forms
npx shadcn@latest add https://oceania.praks.me/r/select.json09
Guidance
Tooltips as quiet annotations.
A final small primitive, staged as an annotation system rather than a loose hover demo.
Annotation targets
npx shadcn@latest add https://oceania.praks.me/r/tooltip.json