@big-wylly-style/ui
v3.4.0
Published
Big Wylly Style — components, tokens, and utilities
Readme
@big-wylly-style/ui
Big Wylly Style — a production-grade component library built on shadcn/ui, Radix UI, and Tailwind CSS v4.
Install
npm install @big-wylly-style/uiSetup
Three things need to happen in your consuming app:
1. Add peer dependencies
The package expects these to already be in your app. Install any you don't have:
npm install react react-dom radix-ui class-variance-authority clsx tailwind-merge lucide-reactOptional (only needed if you use the components that require them):
| Package | Used by |
|---------|---------|
| recharts | Chart |
| @tanstack/react-table | DataTable |
| react-day-picker + date-fns | Calendar, DatePicker |
| vaul | Drawer |
| @base-ui/react | Combobox |
2. Configure Next.js
In your next.config.ts, add @big-wylly-style/ui to transpilePackages so Next.js compiles it from source:
const nextConfig: NextConfig = {
transpilePackages: ["@big-wylly-style/ui"],
};3. Set up CSS
This is the most important step. Two things go in your globals.css:
a) Add a @source directive so Tailwind can find the utility classes used inside the components:
@source "../../node_modules/@big-wylly-style/ui/src";The exact path depends on where your globals.css lives relative to node_modules. Adjust accordingly.
b) Import the design tokens and dark mode variant:
@custom-variant dark (&:is(.dark *));
@import "@big-wylly-style/ui/globals.css";This gives you all the color tokens, radius scale, elevation shadows, typography utilities, and dark mode definitions. Token updates ship automatically with new package versions.
4. Load the Inter font
The design system is built around Inter. Load it however you prefer (next/font, CDN, self-hosted) and set the --font-sans CSS variable:
// layout.tsx
import localFont from "next/font/local";
const inter = localFont({
src: "./fonts/InterVariable.woff2",
variable: "--font-sans",
});
<html className={inter.variable}>Usage
Import components from @big-wylly-style/ui:
import { Button, Card, CardHeader, CardTitle, CardContent } from "@big-wylly-style/ui";
export function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Hello</CardTitle>
</CardHeader>
<CardContent>
<Button variant="primary">Click me</Button>
</CardContent>
</Card>
);
}What's included
- 41 components — atoms, molecules, and organisms
- Design tokens — color scales (gray, violet, orange), semantic tokens, elevation, radius
- Light and dark mode — via
.darkclass on<html> - Typography utilities — heading, paragraph, label, and data display classes
- Metadata files — structured
.metadata.jsonfor each component (useful for AI tooling and documentation)
Publishing
Releases are automated via Release Please. Commits on main using Conventional Commits format are aggregated into a release PR that bumps the version and updates CHANGELOG.md. Merging the release PR creates the tag and triggers the publish workflow.
To cut a release, merge the open chore: release main PR.