starui

Code Block

Display code with syntax highlighting, copy functionality, and theme-aware styling.

from starhtml import Div, H1, P, Form, Input
from components.button import Button
from components.card import Card, CardContent, CardHeader, CardTitle


def contact_form():
    return Card(
        CardHeader(CardTitle("Get in touch")),
        CardContent(
            Form(
                Div(
                    Input(type="text", name="name", placeholder="Name"),
                    Input(type="email", name="email", placeholder="Email"),
                    cls="grid gap-3",
                ),
                Input(type="text", name="subject", placeholder="Subject", cls="mt-3"),
                Button("Send message", type="submit", cls="mt-4 w-full"),
                method="post", action="/contact",
            ),
        ),
    )

Installation

CLI

Install the component using the StarUI CLI:

star add code-block

Examples

Copy to Clipboard

File header with a copy button using Datastar signals and the clipboard action

config.py 
from dataclasses import dataclass, field


@dataclass
class AppConfig:
    host: str = "0.0.0.0"
    port: int = 8000
    debug: bool = False
    db_url: str = "sqlite:///app.db"
    allowed_origins: list[str] = field(
        default_factory=lambda: ["http://localhost:3000"]
    )

    @property
    def is_production(self) -> bool:
        return not self.debug

Inline Code

InlineCode for referencing symbols, commands, and parameters within prose

Components are imported from the registry, e.g. from components.button import Button. Each component accepts a cls parameter for additional Tailwind classes and **kwargs for HTML attributes.

Reactive state uses Signal objects. Toggle visibility with data_show, bind values with data_model, and handle events with data_on_click.

Run star add button card input to scaffold components, or star list to see what's available.

Documentation Layout

Installation instructions with per-command copy buttons and a quick-start guide

Installation

Install StarUI and initialize your project:

pip

pip install starui

uv

uv add starui

Add Components

Scaffold the components you need:

# Initialize a new project
star init

# Add individual components
star add button
star add card input select

# See all available components
star list

Terminal Output

Dark-themed code block styled as terminal output with real CLI commands

Terminal 
$ star init
Initializing StarUI project...
  Writing pyproject.toml
  Writing static/css/input.css
  Writing tailwind.config.js
Done.

$ star add button card
Fetching: button, card
  src/components/button.py  written
  src/components/card.py    written
2 components added.

$ star dev
Watching for changes...
Serving on http://localhost:5001

API Reference

Component Description
CodeBlock Display multi-line code with syntax highlighting
InlineCode Highlight short code snippets within text and documentation