Package Exports
- @estudio-cactus/stowlog-ui-cli
- @estudio-cactus/stowlog-ui-cli/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@estudio-cactus/stowlog-ui-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
🚀 Stowlog UI CLI
Internal CLI tool for managing Stowlog UI components in Next.js projects at Estudio Cactus
CLI tool to install and manage Stowlog design system UI components in Next.js projects. Built with React 19, TypeScript and Tailwind CSS for internal use at Estudio Cactus.
✨ Features
- 🎨 50+ UI Components - Complete React component library
- ⚡ Next.js 15 - Optimized for latest versions
- 🎯 TypeScript - Full typing and autocompletion
- 🎨 Tailwind CSS 4 - Modern utility-first styling
- 🔧 Intuitive CLI - Simple installation and updates
- 📦 Tree Shaking - Import only what you need
- 🌙 Customizable Theme - Dark mode support
🚀 Quick Start
1. Installation
Global Installation (Recommended)
npm install -g @estudio-cactus/stowlog-ui-cli
Use with npx (No installation required)
npx @estudio-cactus/stowlog-ui-cli init
2. Initialize in your Next.js project
# In your Next.js project root directory
stowlog-ui init
3. Setup Configuration (Follow these steps after init)
After running stowlog-ui init
, you'll see these instructions. Follow them to complete the setup:
Step 1: Update your src/app/globals.css
Make sure your existing src/app/globals.css
looks like this:
@import "tailwindcss";
@plugin '../stowlog-ui/stowlog-ui-tw.ts';
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));
@layer base {
* {
@apply border-default-200;
}
}
Step 2: Create src/app/providers.tsx
"use client";
import { ToastProvider } from "@/stowlog-ui/components/toast";
import { StowlogUIProvider } from "@/stowlog-ui/stowlog-ui-provider";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { useRouter } from "next/navigation";
declare module "@react-types/shared" {
interface RouterConfig {
routerOptions: NonNullable<
Parameters<ReturnType<typeof useRouter>["push"]>[1]
>;
}
}
export function Providers({ children }: { children: React.ReactNode }) {
const router = useRouter();
return (
<StowlogUIProvider navigate={router.push}>
<NextThemesProvider attribute="class" defaultTheme="light">
<ToastProvider placement="top-right" toastOffset={10} />
{/* Your existing other providers... */}
{children}
</NextThemesProvider>
</StowlogUIProvider>
);
}
Step 3: Update your main layout (src/app/layout.tsx
)
import "@/app/globals.css";
import "@/stowlog-ui/styles.css";
import { Providers } from "@/app/providers";
import { Georama, Plus_Jakarta_Sans } from "next/font/google";
const georama = Georama({
subsets: ["latin"],
display: "swap",
variable: "--font-georama",
});
const plus_jakarta_sans = Plus_Jakarta_Sans({
subsets: ["latin"],
display: "swap",
variable: "--font-plus-jakarta",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html suppressHydrationWarning lang="en">
<body
className={`${georama.variable} ${plus_jakarta_sans.className} antialiased bg-background text-foreground`}
>
<Providers>{children}</Providers>
</body>
</html>
);
}
4. Start using components
// Using components in your pages
import { Button, Card, Input } from '@/stowlog-ui/components';
// Using utility functions
import { cn } from '@/stowlog-ui/utils';
export default function MyPage() {
return (
<Card className={cn("p-4", "shadow-lg")}>
<Input placeholder="Type something..." />
<Button>Submit</Button>
</Card>
);
}
5. Update components (when needed)
# Update to latest version
stowlog-ui update
⌨️ Available Commands
Command | Description | Options |
---|---|---|
init |
Initialize Stowlog UI in your project | -d, --dir <directory> - Custom directory--force - Force overwrite existing files |
update |
Update components to latest version | --force - Force update without confirmation |
📋 Requirements
- Node.js >= 16.0.0
- Next.js >= 13.0.0
- React >= 18.0.0
- TypeScript >= 4.9.0
- Tailwind CSS >= 4.0.0
🎨 Customization
You can customize the theme by modifying the Tailwind CSS configuration in your globals.css
file. The components are built with Tailwind CSS 4 and support dark mode out of the box.
Available Utilities
The CLI also installs utility functions in the utils
folder:
cn()
- Class name utility for conditional stylingcolors
- Color system utilitiesextend-variants
- Component variant extensionsforward-ref
- React ref forwarding utilitiesget-key-value
- Object key-value utilitiesuse-disclosure
- Hook for disclosure states
👨💻 Author
Jose Gutierro - Estudio Cactus
🙏 Acknowledgments
- HeroUI - Base component library
- Iconify - Vector icons
- Tailwind CSS - CSS framework
- Next.js - React framework