@arthur2079/whale2
v0.4.0
Published
Whale design system — Radix Themes and custom components for React 18 & 19
Readme
@arthur2079/whale2
Whale design system. Components from Radix Themes plus custom Whale components, exported from a single entry point.
Works with React 18 and 19, in Vite and Next.js (Pages or App Router).
Install
yarn add @arthur2079/whale2react and react-dom are peer dependencies. @radix-ui/themes is a regular
dependency, so you do not need to install it yourself.
Usage
Import the stylesheet once at the root of your app, then wrap it in
WhaleProvider:
import { WhaleProvider, Button } from '@arthur2079/whale2';
import '@arthur2079/whale2/styles.css';
export default function App() {
return (
<WhaleProvider>
<Button variant="solid" size="2">
Click me
</Button>
</WhaleProvider>
);
}Next.js App Router
Import the stylesheet in app/layout.tsx. WhaleProvider and every component
already carry the 'use client' directive, so they can be used directly from a
server component without wrapping them yourself.
import { WhaleProvider } from '@arthur2079/whale2';
import '@arthur2079/whale2/styles.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<WhaleProvider>{children}</WhaleProvider>
</body>
</html>
);
}Theming
WhaleProvider accepts every Radix Theme
prop and forwards it untouched, so Radix's own defaults apply — including
grayColor="auto", which picks a gray tuned to the current accent.
<WhaleProvider accentColor="jade" appearance="dark" radius="large">
{children}
</WhaleProvider>Whale intentionally does not override these yet. It is the right place for brand-level defaults once there are values worth setting; restating Radix's own defaults here would only shadow them.
Components
| Component | Source | Needs WhaleProvider |
| --------------- | -------------------------- | --------------------- |
| Button | Radix Themes (re-exported) | yes |
| WhaleProvider | Whale | — |
Source layout mirrors this split: everything under src/radix is built on
Radix Themes and requires WhaleProvider. Whale's own custom components live
outside that folder and depend on neither Radix nor the provider.
Notes
@arthur2079/whale2/styles.css @imports the Radix Themes stylesheet and then adds
Whale's own styles, so one import is all you need. Your bundler resolves that
bare specifier, which also means it can dedupe the Radix rules if something else
in your app imports them directly.