OCN-00
Component registry
source files / design tokens / react
Oceania
A React component registry with design tokens included. Install editable source with the shadcn CLI, keep the files in your app, and tune the system from CSS variables.
install one component
npx shadcn@latest add https://oceania.praks.me/r/button.jsonWhat the CLI writes
components/ui/button.tsxeditable source
app/oceania-tokens.cssdesign tokens
lib/utils.tsshared helper
token-driven output
Components keep their Radix behavior and read Oceania variables for color, radius, typography, and state.
OCN-01
How it works
01
Run the CLI
Use the same shadcn add flow you already know.
02
Keep the files
React components land in your repo as editable source.
03
Tune the tokens
Change CSS variables once and the components follow.
01
Install
Use it like a shadcn registry.
Pick a component, run the CLI command, and the source lands in your project. There is no runtime package to wrap or theme API to learn first.
Install from the registry
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/select.jsonOne token import
Oceania ships the token file with each component dependency. If your app does not import it automatically, add it once in global CSS.
@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
The design system is in the tokens.
The components use the same CSS variables for color, typography, radius, spacing, and state. Change the variables and the installed source follows.
Action
--oc-primary
Primary action
Pressed
--oc-primary-active
Active state
Ink
--oc-text-900
Main text
Error
--oc-error-500
Error state
Wash
--oc-primary-50
Page surface
Caption
--oc-text-500
Support text
04
Forms
Form controls share one border language.
Inputs, field copy, errors, disabled states, and textareas use the same token set so forms do not drift.
Shapes and states
npx shadcn@latest add https://oceania.praks.me/r/input.jsonSharp
Cornered
Rounded
Labels and help text
Used for release notes and registry updates.
Username does not match the workspace.
Textarea
npx shadcn@latest add https://oceania.praks.me/r/textarea.json05
Selection
Selection states are easy to scan.
Checkboxes, radio buttons, and switches show selected, mixed, disabled, and outlined states without leaving the page.
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
Range input with visible feedback.
The slider exposes the current value while you drag, with enough space for the thumb, track, and value label to read clearly.
Allocation
npx shadcn@latest add https://oceania.praks.me/r/slider.json07
Dropdown
Select follows the same form rules.
Triggers, placeholders, selected items, and menu options use the same typography and borders as the other inputs.
Select examples
npx shadcn@latest add https://oceania.praks.me/r/select.json09
Guidance
Tooltips stay out of the way.
Use them for short hints on controls that need a little context. The trigger still works without the tooltip.
Tooltip examples
npx shadcn@latest add https://oceania.praks.me/r/tooltip.json