JSPM

@estudio-cactus/stowlog-ui-cli

1.1.5
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 600
    • Score
      100M100P100Q96446F
    • License MIT

    CLI tool for initializing and managing Stowlog UI components in Next.js projects

    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

    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 styling
    • colors - Color system utilities
    • extend-variants - Component variant extensions
    • forward-ref - React ref forwarding utilities
    • get-key-value - Object key-value utilities
    • use-disclosure - Hook for disclosure states

    👨‍💻 Author

    Jose Gutierro - Estudio Cactus

    🙏 Acknowledgments