@ootc/web-ui
v0.1.13
Published
A React component library built with CSS Modules and design tokens. Zero runtime dependencies beyond React itself.
Readme
@ootc/web-ui
A React component library built with CSS Modules and design tokens. Zero runtime dependencies beyond React itself.
Install
pnpm add @ootc/web-ui
# optional — needed for <Icon>
pnpm add react-iconsSetup
Import the design token stylesheet once at your app root:
import "@ootc/web-ui/styles.css";Wrap your app with the required providers:
import { ThemeProvider, ToastProvider } from "@ootc/web-ui";
function App() {
return (
<ThemeProvider defaultTheme="system">
<ToastProvider>
{/* your app */}
</ToastProvider>
</ThemeProvider>
);
}Usage
All components are named exports from the package root:
import { Button, Badge, Dialog, useToast } from "@ootc/web-ui";Router Integration
Link-like components support a shared router adapter through LinkProvider.
Use it once near your app root for routers that expect to instead of href:
import { LinkProvider } from "@ootc/web-ui";
import { Link as RouterLink } from "react-router-dom";
function App() {
return (
<LinkProvider component={RouterLink} hrefProp="to">
{/* app */}
</LinkProvider>
);
}Next.js works with the default href mapping:
import NextLink from "next/link";
import { LinkProvider } from "@ootc/web-ui";
<LinkProvider component={NextLink}>{/* app */}</LinkProvider>The provider is used by Link, BreadcrumbLink, PaginationLink, PaginationPrevious, PaginationNext, TabsTrigger when href is set, NavigationMenuTrigger when href is set, NavigationMenuLink, SidebarItem when href is set, MenubarItem when href is set, DropdownMenuItem when href is set, ContextMenuItem when href is set, CommandPalette items with href, MailItem when href is set, and Tree leaf items with href.
Components
Actions
Button · ButtonGroup · IconButton · CopyButton · Icon
Typography
Heading · Text · Link · Kbd · Code · CodeBlock
Identity & Status
Badge · Avatar · AvatarImage · AvatarFallback · AvatarGroup · Tag · Skeleton · Spinner
Layout
Stack · Inline · Grid · Container · Separator · ScrollArea · Panel · Toolbar · SettingsSection · AspectRatio · Sidebar · PageShell · PageBody · PageTopbar · PageContent
Forms
Field · Label · Input · Textarea · Select · Checkbox · Radio · Switch · Slider · NumberInput · SearchInput · InputGroup · FileUpload · InputOTP · Combobox · MultiSelect · Calendar · DatePicker · DateRangePicker · TimePicker · ColorPicker
Navigation
Tabs · Breadcrumb · Pagination · Stepper · NavigationMenu · Menubar · FilterBar
Overlays
Dialog · AlertDialog · ConfirmDialog · Sheet · Drawer · Popover · HoverCard · Tooltip · DropdownMenu · ContextMenu · CommandPalette · Toast / useToast
Feedback
Alert · Callout · Banner · Progress · ProgressCircle
Data Display
Table · DataTable · List · DescriptionList · PropertyList · Stat · Timeline · Accordion · Collapsible · Tree · EmptyState · EmptySearchState · ColorSwatch
Utilities
VisuallyHidden
Theming
The library ships light and dark tokens. ThemeProvider sets data-theme on <html> and persists the user's choice to localStorage.
import { useTheme, ThemeToggle } from "@ootc/web-ui";
const { theme, setTheme, resolvedTheme } = useTheme();
// theme: "light" | "dark" | "system"
// Pre-built cycle button
<ThemeToggle />Use design tokens directly in your own CSS:
.my-surface {
background: var(--ds-bg-surface);
border: 1px solid var(--ds-border-card);
border-radius: var(--ds-radius-md);
box-shadow: var(--ds-shadow-md);
color: var(--ds-text-primary);
}Key tokens:
| Category | Tokens |
|---|---|
| Backgrounds | --ds-bg-page · --ds-bg-surface · --ds-bg-soft · --ds-bg-muted |
| Text | --ds-text-primary · --ds-text-secondary · --ds-text-muted · --ds-text-disabled |
| Borders | --ds-border-card · --ds-border-soft · --ds-border-strong |
| Accents | --ds-accent-info · --ds-accent-danger · --ds-accent-success · --ds-accent-warning |
| Shadows | --ds-shadow-sm · --ds-shadow-md · --ds-shadow-lg · --ds-shadow-xl |
| Z-index | --ds-z-dropdown · --ds-z-modal · --ds-z-popover · --ds-z-toast |
| Motion | --ds-transition-fast · --ds-transition-base · --ds-transition-slow |
| Shape | --ds-radius-sm · --ds-radius-md · --ds-radius-lg |
Peer Dependencies
{
"react": "^19.0.0",
"react-dom": "^19.0.0"
}react-icons is an optional peer dependency, required only when using <Icon>.
License
MIT