starui

Code Block

Display code with syntax highlighting, copy functionality, and various styling options.

Python Code

def fibonacci(n):
    """Generate Fibonacci sequence up to n."""
    a, b = 0, 1
    sequence = []
    while a <= n:
        sequence.append(a)
        a, b = b, a + b
    return sequence

# Usage example
numbers = fibonacci(100)
print(f"Fibonacci numbers up to 100: {numbers}")

Installation

CLI

Install the component using the StarUI CLI:

star add code-block

Examples

Interactive Copy Feature

Add copy-to-clipboard functionality with visual feedback

Interactive Code Block

example.py 


import asyncio
from datetime import datetime

async def process_data(data):
    """Process data asynchronously with timestamp."""
    timestamp = datetime.now().isoformat()
    print(f"[{timestamp}] Processing: {data}")

    # Simulate async work
    await asyncio.sleep(1)

    result = {
        'processed_data': data.upper(),
        'timestamp': timestamp,
        'status': 'completed'
    }

    return result

# Example usage
async def main():
    tasks = [
        process_data("hello"),
        process_data("world"),
        process_data("async")
    ]

    results = await asyncio.gather(*tasks)
    for result in results:
        print(f"Result: {result}")

if __name__ == "__main__":
    asyncio.run(main())

Inline Code Snippets

Highlight short code snippets within text and documentation

Use the useState hook to manage component state in React. You can import it like this: import { useState } from 'react'. Then call it in your component: const [count, setCount] = useState(0) to create a state variable.

For styling, you can use CSS classes like bg-blue-500 for background color, text-white for text color, and p-4 for padding.

Configuration files often use formats like config.json or settings.yaml. Environment variables are accessed via process.env.NODE_ENV in Node.js.

Documentation Layout

Structure documentation with code blocks for installation and usage examples

Installation

Install StarUI using your preferred package manager:

npm

npm install starui

pnpm

pnpm add starui

yarn

yarn add starui

Quick Start

Import and use components in your project:

from starhtml import Div, H1, P
from starui import Button, Card, CardHeader, CardTitle, CardContent

def my_app():
    return Div(
        Card(
            CardHeader(
                CardTitle("Welcome to StarUI")
            ),
            CardContent(
                P("Build beautiful interfaces with ease."),
                Button("Get Started", variant="primary", cls="mt-4")
            )
        ),
        cls="max-w-md mx-auto mt-8"
    )

Terminal Output

Style code blocks to look like terminal output with custom colors

Terminal Output

Terminal 


$ star create my-project
Creating new StarUI project...
✓ Project directory created
✓ Dependencies installed  
✓ Configuration files generated
✓ Example components added

Success! Your project is ready.

$ cd my-project
$ star dev
Starting development server...
Server running at http://localhost:3000

$ star add button
Adding Button component...
✓ Component files created
✓ Styles updated
✓ Documentation generated

Component 'Button' added successfully!
Run 'star dev' to see your changes.

API Reference

Component Description
CodeBlock Display multi-line code with syntax highlighting
CodeBlockStyles Generate theme-aware styles for code blocks (add once to app headers)
InlineCode Highlight short code snippets within text and documentation