v1 Β· MIT-licensed

A reactive look for the open web.

A general-purpose CSS framework β€” buttons, cards, grids, forms β€” styled in the Pluto.jl notebook aesthetic. Drop one file in, write semantic HTML, ship a beautiful page.

Browse components Read the docs

Color palette

Eight semantic slots, sourced from Pluto's admonition palette and warm welcome-page tones.

primary --pluto-primary
success --pluto-success
info --pluto-info
warning --pluto-warning
danger --pluto-danger
neutral --pluto-neutral
light --pluto-light
dark --pluto-dark

Typography

Vollkorn for headings, Alegreya Sans for body, JuliaMono for code.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

A paragraph with italic, bold, links, inline x = sum(1:100), Cmd+Enter, and highlighted bits. The body text uses Alegreya Sans for warmth β€” a font that works on screen as well as in print.

A lead paragraph stands a little larger and a little softer than the body around it.

"There are two ways of constructing a software design: one is to make it so simple that there are obviously no deficiencies, and the other is to make it so complicated that there are no obvious deficiencies." C.A.R. Hoare 
function fib(n::Integer)
    n < 2 ? n : fib(n - 1) + fib(n - 2)
end

fib(10)  # => 55
What's a Pluto notebook again?

A reactive Julia notebook: change one cell and every dependent cell updates automatically.

Grid

12-column flex grid with sm / md / lg / xl breakpoints. Same surface as Bootstrap.

col-12 Β· col-md-6 Β· col-lg-4
col-12 Β· col-md-6 Β· col-lg-4
col-12 Β· col-md-12 Β· col-lg-4
col
col
col-auto

Buttons

Alerts

Default

A neutral callout for context. Pluto's "message" admonition.

Info

A friendly side note β€” perfect for tips and "did you know"-style content.

Success

Things went well.

Warning

Tread carefully β€” caveats live here.

Danger

For things that break if ignored: irreversible actions, security issues, etc.

Hover for hint

The text is blurred until you hover or focus the alert. Perfect for tutorial spoilers.

Badges

default primary success info warning danger dark light
pill running stale

Cards

Plain card

A simple card β€” title, text, no chrome.

Featured

Card with header

A subtitle for context

Headers and footers gently tint to separate them from the body.

last updated 2 days ago

Linked card

The whole card is the link.

Tables

Variable Type Value
x Int64 42
greeting String "hello"
v Vector{Float64} [1.0, 2.5, 3.7]
Ο€ Irrational{:Ο€} 3.14159...

List groups

  • Reactive evaluation
  • Live document
  • Web-native UI
  • Coming soon
Get started Tutorials API reference Source on GitHub

Forms

We'll never share your email.

https://
Looks empty β€” please add something.

Breadcrumbs

Pagination

Progress & spinners

35%
65%
85%
running… queued

Tabs & pills

tab body

Modal

Tooltips

Hover over or this link to see the tooltip.

Code cells Pluto signature

Optional component for notebook-style content: input on top, output below.

x = [1, 2, 3, 4, 5]
x 5-element Vector{Int64}: [1, 2, 3, 4, 5] 
md"Reactive **markdown** cell"

Reactive markdown cell.

1 / "two"
MethodError: no method matching /(::Int64, ::String)

PlutoUI widgets

Components ported from PlutoUI.jl β€” switch, range, multi-checkbox, notebook card, table-of-contents, and the layout aside.

Switch

Range

Check-list (multi-checkbox)

Notebook cards

Reactive plots in Pluto

Build interactive plots that update as you drag a slider β€” no callbacks, no event wiring.

Open notebook β†’

Differential equations

Combine DifferentialEquations.jl with bonds for live parameter exploration.

Open notebook β†’

Table of contents (sticky)

The TOC works as an inline list or a sticky aside. Add .toc-aside to make it stick to the viewport.

<nav class="toc toc-aside">
    <h4 class="toc-header">Contents</h4>
    <a class="toc-h1" href="#a">Section A</a>
    <a class="toc-h2" href="#a1">Subsection</a>
</nav>

Layout: aside (sidenote)

Asides are sidenotes that float to the right of the main column on wide viewports and flow inline below 1030px. On a narrow window, this paragraph and the aside box stack vertically β€” try resizing the page.

On large screens the aside lives in the negative-space margin to the right of the main column, similar to footnotes in Tufte-style typography or marginalia in academic prose.

Utilities

A small atomic-utility set: spacing, display, flex, text, color, border, shadow, position, sizing.

Spacing

.p-1 .p-2 .p-3 .p-4

Surfaces

.shadow-sm .border
.shadow
.shadow-lg

Text

.text-primary

.text-success

.text-info

.text-warning

.text-danger

.text-muted