Getting Started/Installation

Prerequisites

Suite.jl requires:

Julia 1.12 or later
Therapy.jl — the reactive web framework
A Therapy.jl app (created with the App framework)

Add Suite.jl

Add Suite.jl as a dependency to your project:

julia

using Pkg
Pkg.add(url="https://github.com/GroupTherapyOrg/Suite.jl")

Then add it to your app file:

julia

using Therapy
using Suite

app = App(
    routes_dir = "src/routes",
    components_dir = "src/components",
    title = "My App"
)

Therapy.run(app)

Tailwind CSS Setup

Suite.jl components use Tailwind CSS classes. Your app's input.css needs to include Suite.jl's source directories for Tailwind to scan:

julia

/* input.css */
@import "tailwindcss";

/* Scan Suite.jl component files for Tailwind classes */
@source "../../Suite.jl/src";

/* Your app's routes and components are already scanned by Therapy.jl */

Tip

Therapy.jl's App framework handles Tailwind compilation automatically. You just need the @source directive to include Suite.jl's classes.

Using Components

Once installed, use any Suite.jl component in your routes:

julia

# src/routes/index.jl
function HomePage()
    Div(:class => "max-w-md mx-auto py-12",
        Card(
            CardHeader(
                CardTitle("Welcome"),
                CardDescription("Your new Julia web app")
            ),
            CardContent(
                Div(:class => "grid gap-4",
                    Label("Name"),
                    Input(placeholder="Enter your name"),
                    Button("Submit")
                )
            )
        )
    )
end

HomePage

Extracting Components

The extraction model is Suite.jl's core feature — just like shadcn/ui, you can copy any component into your project and customize it freely:

julia

using Suite

# Extract a single component
Suite.extract(:Button, "src/components/")

# Extract with dependencies (automatic)
Suite.extract(:Dialog, "src/components/")
# → Extracts Dialog.jl + Button.jl + utils.jl

# Extract with a theme baked in
Suite.extract(:Card, "src/components/", theme=:ocean)

# List all available components
Suite.list()

# Get info about a specific component
Suite.info(:Dialog)

Extracted components are self-contained Julia files. They use an @isdefined guard pattern so they work both via using Suite and via include() in your own project.

Interactive Components

All interactive components (Dialog, Menu, Tooltip, etc.) are powered by WebAssembly via Therapy.jl's @island macro. No JavaScript runtime is needed — just use the components directly in your layouts.

Next Steps

Theming — Customize colors, radius, and fonts
Components — Browse all 50+ components
Button — Start with the most basic component