Suite.jl

Introduction

Suite.jl is a component library for Therapy.jl — beautifully designed, accessible, and copy-paste friendly.

What is Suite.jl?

Suite.jl is a collection of 50+ UI components built on Therapy.jl, Julia's reactive web framework. It follows the shadcn/ui philosophy: you own the code, not a dependency.

Every component is accessible (WAI-ARIA compliant), supports light and dark mode, and uses the warm neutral design system shared across the GroupTherapyOrg ecosystem.

Key Concepts

Own the code

Suite.jl works in two modes. You can use it as a package dependency, or you can extract components into your own project and customize them freely:

julia
# Mode 1: Use as a package
using Suite
Button(variant="outline", "Click me")

# Mode 2: Extract and customize
Suite.extract(:Button, "src/components/")
# Now edit src/components/Button.jl however you want

Three implementation tiers

Components are implemented in three tiers based on their interactivity needs:

TierHow it worksExamples
Pure StylingJulia functions generating HTML + Tailwind CSSButton, Card, Badge, Alert, Input, Table
Island (Wasm)@island macro compiles Julia logic to WebAssemblyDialog, Accordion, Tabs, Slider, Calendar, Select, Command
WidgetIsland + @bind protocol for notebook integrationSlider(1:100) — same styling, plus bond methods for @bind

Built-in themes

Suite.jl ships with 5 pre-built themes. Apply a theme with a single keyword argument, or extract components with a theme baked in:

julia
# Apply at render time
Button(theme=:ocean, variant="outline", "Ocean Style")

# Or extract with a theme baked in
Suite.extract(:Button, "components/", theme=:nature)

Quick Start

Add Suite.jl to your Therapy.jl project:

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

Then use components in your app:

julia
using Therapy
using Suite

function MyPage()
    Card(
        CardHeader(
            CardTitle("Hello Suite.jl"),
            CardDescription("Your first component")
        ),
        CardContent(
            Button("Get Started")
        )
    )
end

See the Installation guide for detailed setup instructions, or browse the Components to see what's available.