AJ STUDIOZ Code Blocks Component CLI

A powerful CLI tool for adding beautiful code blocks with syntax highlighting, copy functionality, and toast notifications to your React/Next.js projects.

Features

✨ Syntax Highlighting - Beautiful code syntax highlighting using sugar-high
📋 Copy to Clipboard - One-click copy with success/error toast notifications
🔄 Line Wrapping - Toggle between horizontal scroll and line wrapping
⚡ Performance Optimized - Lazy loading for large code blocks
🎨 Customizable - Fully customizable with Tailwind CSS
📱 Responsive - Works perfectly on all device sizes

Installation

Create New Project

# Create a new Next.js project with code blocks
npx @ajstudioz14151/codeblocks-component@latest create my-app

# Auto-create with default settings
npx @ajstudioz14151/codeblocks-component@latest create my-app --yes

Add to Existing Project

# Add code blocks to existing project
npx @ajstudioz14151/codeblocks-component@latest add

# Add with auto-confirm
npx @ajstudioz14151/codeblocks-component@latest add --yes

# Add specific components only
npx @ajstudioz14151/codeblocks-component@latest add codeblock
npx @ajstudioz14151/codeblocks-component@latest add toaster

Usage

Basic Example

import { CodeBlock } from '@/components/codeblocks/code-block';
import { Toaster } from '@/components/ui/toaster';

export default function MyPage() {
  const code = `function greeting(name) {
  console.log('Hello, ' + name + '!');
  return 'Welcome to AJ STUDIOZ Code Blocks';
}`;

  return (
    <div>
      <CodeBlock language="javascript" elementKey="demo">
        {code}
      </CodeBlock>
      <Toaster />
    </div>
  );
}

Advanced Example

import React, { useState } from 'react';
import { CodeBlock } from '@/components/codeblocks/code-block';

const examples = {
  javascript: `const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);`,
  
  python: `def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)`,
        
  css: `.button {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}`
};

export default function CodeExamples() {
  const [activeLanguage, setActiveLanguage] = useState('javascript');

  return (
    <div>
      <div className="flex gap-2 mb-4">
        {Object.keys(examples).map((lang) => (
          <button
            key={lang}
            onClick={() => setActiveLanguage(lang)}
            className={`px-3 py-1 rounded ${
              activeLanguage === lang ? 'bg-blue-500 text-white' : 'bg-gray-200'
            }`}
          >
            {lang}
          </button>
        ))}
      </div>
      
      <CodeBlock 
        language={activeLanguage} 
        elementKey={`example-${activeLanguage}`}
      >
        {examples[activeLanguage]}
      </CodeBlock>
    </div>
  );
}

Component API

CodeBlock Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | children | string | ✅ | The code content to display | | language | string | ✅ | Programming language for syntax highlighting | | elementKey | string | ✅ | Unique key for the component instance |

Supported Languages

The component supports all languages supported by sugar-high:

• JavaScript/TypeScript
• Python
• CSS/SCSS
• HTML/XML
• JSON
• Markdown
• And many more...

Dependencies

The CLI automatically installs these dependencies:

{
  "lucide-react": "Icons for copy/wrap buttons",
  "clsx": "Conditional CSS classes",
  "tailwind-merge": "Merge Tailwind classes",
  "sugar-high": "Syntax highlighting",
  "sonner": "Toast notifications"
}

Commands

create <project-name>

Creates a new Next.js project with code blocks components.

npx @ajstudioz14151/codeblocks-component@latest create my-app

Options:

• --yes - Skip prompts and use defaults

add [component]

Adds code blocks components to existing project.

npx @ajstudioz14151/codeblocks-component@latest add
npx @ajstudioz14151/codeblocks-component@latest add codeblock
npx @ajstudioz14151/codeblocks-component@latest add toaster

Options:

• --yes - Skip prompts and use defaults
• --overwrite - Overwrite existing files

init

Initializes code blocks components in current directory (alias for add).

npx @ajstudioz14151/codeblocks-component@latest init

File Structure

After installation, your project will have:

src/
├── components/
│   ├── codeblocks/
│   │   └── code-block.tsx      # Simple wrapper component
│   └── ui/
│       ├── code-block.tsx      # Main CodeBlock component
│       └── toaster.tsx         # Toast notifications
├── lib/
│   └── utils.ts                # Utility functions
└── app/
    ├── codeblocks/
    │   └── page.tsx            # Demo page
    └── page.tsx                # Updated homepage

Customization

Styling

The components use Tailwind CSS and CSS variables. You can customize the appearance by:

1. CSS Variables: Modify your theme colors in globals.css
2. Tailwind Classes: Edit the component files directly
3. Custom Themes: Use the cn() utility for conditional styling

Example Custom Styling

import { CodeBlock } from '@/components/codeblocks/code-block';

<CodeBlock 
  language="javascript" 
  elementKey="custom"
  className="my-custom-codeblock"
>
  {code}
</CodeBlock>

.my-custom-codeblock {
  @apply border-2 border-blue-500 rounded-2xl;
}

.my-custom-codeblock .code-header {
  @apply bg-blue-50 border-blue-200;
}

Contributing

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

License

MIT License - see LICENSE file for details.

Support

• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📧 Email: [email protected]

Made with ❤️ by AJ STUDIOZ