obvious v0.1.0

React components

4 components served as a shadcn registry. shadcn copies the source into your app, so each app owns its copy and takes updates when it runs add again.

Adding one

npx shadcn add https://obvious-nine.vercel.app/r/sheet.json

Or add the registry to the app's components.json once and use the short name.

"registries": { "@obvious": "https://obvious-nine.vercel.app/r/{name}.json" }
npx shadcn add @obvious/sheet

Files land in components/obvious/ and each .tsx imports its own CSS. Class names are ob-* and colours come from the theme. Size, radius and timing are --ob-* custom properties, so an app sets them on :root to match itself.

Motion

Small animated pieces: Tabs, Badge, AnimatedNumber, TextSwap, useReveal, SuccessCheck, Switch, SearchField, Checkbox, IconSwap, DotLoader and Odometer. Styles and motion included.

npx shadcn add @obvious/motion

Sheet

Bottom sheet on phones that drags down to close, centred dialog on bigger screens. Escape closes the top one; the page stays locked until all are gone.

npx shadcn add @obvious/sheet

Brings in motion too.

Toasts

Stacked toasts. A new one rises in front, older ones step back, a fourth pushes the oldest out. useToasts() gives you toast(text, tone).

npx shadcn add @obvious/toasts

Brings in motion too.

Plus menu

A + that grows into the menu it opens. Pass it items with a label, hint, icon and onSelect.

npx shadcn add @obvious/plus-menu

shadcn/ui

For dialogs, popovers and selects, use shadcn's own components. obvious/shadcn/theme.css points shadcn's variables at --ds-*, so they take the app's theme, dark set included. Import it after shadcn's globals. It needs a Tailwind app.