Bluecow Digital UI

A modern, accessible, and customizable React component library built with Tailwind CSS and Radix UI primitives. Bluecow Digital UI provides a collection of reusable components that follow best practices for accessibility, performance, and developer experience.

Features

• 🎨 Built with Tailwind CSS for easy customization
• ♿️ Accessible components powered by Radix UI
• 🚀 Modern React patterns with TypeScript support
• 🎭 Customizable animations with GSAP
• 📦 Tree-shakeable and lightweight

Installation

npm install @bluecowdigital/ui

Peer Dependencies

This library requires the following peer dependencies:

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "tailwindcss": "^3.0.0",
  "@radix-ui/react-tabs": "^1.0.0",
  "@radix-ui/react-slot": "^1.0.0",
  "gsap": "^3.0.0"
}

Tailwind Setup

To use Bluecow Digital UI components, you need to configure your tailwind.config.js to include the library's styles:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@bluecowdigital/ui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
    },
  },
  plugins: [],
}

Usage

import { 
  Button,
  Input,
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Label
} from "@bluecowdigital/ui"

function App() {
  return (
    <div className="p-4">
      <TabsRoot defaultValue="tab1">
        <TabsList>
          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">
          <Card>
            <CardHeader>
              <CardTitle>Welcome</CardTitle>
              <CardDescription>This is a sample card</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <Label htmlFor="name">Name</Label>
                  <Input id="name" placeholder="Enter your name" />
                </div>
                <Button>Submit</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="tab2">
          <p>Tab 2 content</p>
        </TabsContent>
      </TabsRoot>
    </div>
  )
}

Customization

All components are built with Tailwind and class-variance-authority, making it easy to:

• Extend variants (e.g., add a danger button)
• Override styles using className
• Create your own themes by editing tailwind.config.js

Example: Custom Button Variant

import { Button } from "@bluecowdigital/ui"
import { cva } from "class-variance-authority"

// Extend the button variants
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
        // Add your custom variant
        danger: "bg-red-500 text-white hover:bg-red-600",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

// Use the custom variant
function MyComponent() {
  return (
    <Button variant="danger" size="lg">
      Delete Account
    </Button>
  )
}

Example: Theme Customization

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#0070f3",
          foreground: "#ffffff",
        },
        secondary: {
          DEFAULT: "#f4f4f5",
          foreground: "#18181b",
        },
        // Add your custom colors
      },
      borderRadius: {
        DEFAULT: "0.5rem",
      },
    },
  },
}

Available Components

• Button - A customizable button component
• Input - A styled input component
• Label - A form label component
• Card - A container component with header, content, and footer sections
• Tabs - A tabbed interface component with animated indicators

CLI Tool

We also provide a CLI tool to help you add components to your project:

# Add a component
npx @bluecowdigital/ui add button

# Add a component to a specific directory
npx @bluecowdigital/ui add tabs --path src/components/ui

# Force overwrite existing files
npx @bluecowdigital/ui add input --overwrite

# Install missing component dependencies too
npx @bluecowdigital/ui add button --install

The package exposes ui, bluecowdigital-ui, bluecowdigital, component-library, bluecow-ui, and bluecow bin aliases. npm scoped package names must include both a scope and package name, so the valid scoped npx form for this package is npx @bluecowdigital/ui add button. If an older published package is still being used by npm, run npx @bluecowdigital/ui@latest add button after publishing the fixed version.

WPMotion Compiler

The package also exposes a build-time compiler at @bluecowdigital/ui/compiler. It compiles a closed WPMotion component bundle:

hero-aurora/
  component.jsx
  meta.js
  preview.js

import { compileWPMotionComponent, writeWPMotionOutput } from "@bluecowdigital/ui/compiler"

const result = compileWPMotionComponent("./hero-aurora", { strict: true })

if (result.ok) {
  writeWPMotionOutput(result.output, { outDir: "./registry" })
} else {
  console.table(result.diagnostics)
}

The compiler validates the authoring contract, builds a typed IR, emits React registry output, emits a scoped universal HTML/CSS/JS block, and rejects unsafe JSX, URLs, attributes, imports, and unsupported expressions.

Compiler Guarantees

• Closed bundles only: component.jsx, meta.js, and preview.js
• Static metadata and preview defaults; no source execution
• Allow-listed JSX tags, attributes, imports, hooks, URLs, and expression forms
• Token-aware styling with scoped universal CSS
• IR-based React output, not source passthrough
• Interaction validation for reveal, toggle, tabs, and carousel-lite
• Deterministic content hashes and reproducible output
• Structured diagnostics plus a human-readable formatter

The output writer emits:

component.jsx
registry.json
universal.html
universal.css
universal.js
model.json
report.json
manifest.json

report.json includes deterministic source/output byte counts, IR analysis counts, diagnostic counts, and the active compiler security policies.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Your Name]