SpeedPy UI

Component Preview

Reusable Tailwind-backed classes for SpeedPy pages, forms, account screens, navigation, and dashboard surfaces.

Foundation

Typography and Page Layout

Use page and section helpers before reaching for long wrapper utilities.

Overview

Heading One

Heading Two

Heading Three

Lead copy is for page intros and section summaries.

Code

<div class="page-container">
  <div class="section-header">
    <p class="eyebrow">Overview</p>
    <h1 class="h1">Dashboard</h1>
    <p class="lead">Summary text.</p>
  </div>
</div>

Actions

Buttons

Compose variant, color, and size. Size defaults to medium.

Contained

Outlined and Text

Code

<button class="btn btn-contained btn-primary">Save</button>
<button class="btn btn-outlined btn-error btn-sm">Delete</button>
<a href="#" class="btn btn-text btn-secondary btn-lg">Learn more</a>

New Primitives

Low-JS Components

Static and native HTML components for common product UI patterns.

Divider

Section one

Section two

or continue with

Left Right

Code

<hr class="divider">
<div class="divider-text">or continue with</div>
<span class="divider-vertical"></span>

Paper

Outlined

Raised

Overlay

Code

<div class="paper paper-outlined paper-padded paper-elevation-1">
  Content
</div>

Chips

Default Primary Success Warning Error Outlined A Assigned Removable

Code

<span class="chip chip-primary">
  <span class="chip-avatar">A</span>
  Assigned
</span>
<span class="chip chip-outlined">
  Removable
  <button type="button" class="chip-remove" aria-label="Remove chip">&times;</button>
</span>

Button Group

Code

<div class="btn-group" role="group" aria-label="View options">
  <button class="btn btn-outlined btn-primary btn-sm">Day</button>
  <button class="btn btn-outlined btn-primary btn-sm">Week</button>
  <button class="btn btn-contained btn-primary btn-sm">Month</button>
</div>

Breadcrumbs

Code

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Dashboard</a></li>
    <li class="breadcrumb-item"><span class="breadcrumb-current">Members</span></li>
  </ol>
</nav>

Skeleton

Code

<div class="skeleton skeleton-circular h-12 w-12"></div>
<div class="skeleton skeleton-text-lg w-2/3"></div>
<div class="skeleton skeleton-text w-full"></div>
<div class="skeleton skeleton-rectangular h-20 w-full"></div>

Linear Progress

Code

<div class="progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-primary" style="width: 45%"></div>
</div>

Accordion

Can this use native HTML?

Yes. The first version uses details and summary, so it works without custom JavaScript.

When should Alpine be added?

Add Alpine only when the product needs behavior like one-open-at-a-time groups.

Code

<details class="accordion-item" open>
  <summary class="accordion-header">Question</summary>
  <div class="accordion-body">Answer</div>
</details>

Timeline

Invite accepted

Today at 09:24

A new member joined the workspace.
Plan changed

Yesterday at 16:10

Billing moved to the growth plan.
Review requested

Monday at 11:02

Security settings need an owner review.

Code

<ol class="timeline">
  <li class="timeline-item">
    <span class="timeline-marker timeline-marker-success"></span>
    <div class="timeline-content">...</div>
  </li>
</ol>

Stepper

1

Account

Profile created
2

Team

Invite members
3

Billing

Choose a plan

Code

<ol class="stepper">
  <li class="step step-active">
    <span class="step-marker">2</span>
    <div class="step-body">...</div>
  </li>
</ol>

Forms

Inputs and Controls

Crispy templates already emit these classes for most form fields.

Open Django FormView example

Text input

Helper text sits beneath the field.

With error

This field is required.

Select

Textarea

Input group

.00

Choices Subscribe One

Code

<div class="form-field">
  <label class="input-label" for="email">Email</label>
  <input class="input-outlined" id="email" type="email">
  <p class="input-helper">Helper text.</p>
</div>

<label class="switch">
  <input type="checkbox" class="sr-only peer">
  <span class="switch-track"></span>
  <span class="switch-thumb"></span>
</label>

Demo App

CRUD Screens

A complete Product example shows how the component classes fit regular Django generic views.

Open Product CRUD demo Open CreateView

What is included

List, create, detail, and delete pages live in `demoapp`.

Product ListView Product CreateView Product DetailView and DeleteView are linked from each product row.

Code

class ProductListView(ListView):
    model = Product
    template_name = "demoapp/product_list.html"
    context_object_name = "products"

class ProductCreateView(CreateView):
    model = Product
    form_class = ProductForm
    template_name = "demoapp/product_form.html"

Surfaces

Cards, Lists, Badges, and Alerts

Use these for dashboard panels, account pages, status rows, and short messages.

Card title

Card body content uses the theme surface, divider, and elevation tokens.

Code

<div class="card">
  <div class="card-header"><h2 class="h3">Title</h2></div>
  <div class="card-body">Content</div>
  <div class="card-footer">Actions</div>
</div>

Primary email Primary
Security status Verified

Code

<ul class="list-group">
  <li class="list-group-item">Primary email</li>
  <li class="list-group-item">Security status</li>
</ul>

Badges

Primary Secondary Success Info Warning Error

Code

<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-error">Error</span>

Alerts

Your account settings were saved.

Two-factor authentication is not enabled.

This destructive action needs confirmation.

Your trial ends in three days.

Nothing to report right now.

A new version is available.

Draft saved locally.

Linked to your other workspace.

A quiet aside.

Code

<div class="alert alert-success">Saved successfully.</div>
<div class="alert alert-warning">Review this setting.</div>
<div class="alert alert-error">Action failed.</div>
<div class="alert alert-info">For your information.</div>
<div class="alert alert-neutral">No strong signal either way.</div>

Variants: alert-success alert-error alert-warning alert-info alert-primary alert-secondary alert-tertiary alert-neutral alert-light. Every one is listed here on purpose: Tailwind compiles only the classes it can see, so a variant that appears nowhere is absent from styles.css and does nothing when you use it. alert-neutral was in exactly that state until it was added to this gallery.

Data Display

Tables

Token-aware table classes cover simple admin and settings data.

Name	Status	Role
Mira Ruiz	Active	Owner
Tom Nakamura	Pending	Member

Code

<table class="table table-hover table-striped">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Navigation

Account and Sidebar Menus

Navigation helpers keep account settings and dashboard sidebar links compact.

Account Nav

Code

<ul class="account-nav">
  <li><a href="#" class="account-nav-link account-nav-link-active">Profile</a></li>
  <li><a href="#" class="account-nav-link">Change Password</a></li>
</ul>

Avatars and Media Icons

A SP UI

Code

<span class="media-icon">A</span>
<span class="avatar-sm">SP</span>
<span class="avatar-xs">UI</span>

Code

<div class="sidebar-brand">
  <span class="avatar-sm">SP</span>
  <span class="sidebar-brand-text">SpeedPy</span>
</div>

<a href="#" class="sidebar-link sidebar-link-active">
  <svg class="sidebar-link-icon">...</svg>
  Dashboard
</a>

Sidebar Select

Code

<button class="sidebar-select text-neutral-100">
  <span class="flex items-center gap-2">
    <span class="avatar-xs">TM</span>
    Select team
  </span>
  <span class="text-neutral-400">v</span>
</button>

Recovered components

Display, Quotes, Overlays, Tabs

Each of these existed in input.css but compiled to nothing, because no template referenced it. Keep them rendered here.

Display headings

Ship it

Smaller display

Code

<h1 class="display-1">Hero</h1>
<p class="display-4">Section opener</p>

display-1 to display-6, largest first. Fluid: they scale with the viewport, so they are for marketing pages rather than dense UI.

Blockquotes

Cut the scope, not the quality.

Measure before you optimise.

This one needs a second pair of eyes.

Code

<blockquote class="blockquote blockquote-primary">
  Cut the scope, not the quality.
</blockquote>

Variants: primary secondary tertiary success info warning danger neutral muted dark light black white. The base blockquote sets the type; the variant adds the left rule and tint.

Tabs

Panel content sits here.

Code

<div class="tab-list tab-list-underline">
  <button class="tab tab-underline" aria-selected="true">Overview</button>
  <button class="tab tab-underline" aria-selected="false">Activity</button>
</div>
<div class="tab-content">...</div>

The selected style is driven by aria-selected="true", so the accessible attribute and the visual state cannot drift apart. Panel switching is yours — these are styles, not behaviour.

Tooltip and dropdown item

A tooltip is hidden until a script positions it, so it is shown here forced visible:

Code

<span class="tooltip">Copied<span class="tooltip-arrow"></span></span>

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Rename</a>
</div>

Both are styles only. tooltip ships hidden and transparent — position and reveal it yourself, or it will look broken rather than absent.

Modal

Shown inline rather than as an overlay, since a real one covers the page:

Code

<div class="modal">
  <div class="modal-bg"></div>
  <div class="modal-content modal-sm">...</div>
</div>

Widths: modal-sm modal-lg modal-xl. Styles only — opening, closing, focus trapping and Escape handling are yours.

Progress, input sizes, elevation

elevation 8

elevation 24

Code

<div class="progress progress-xl">
  <div class="progress-bar progress-info" style="width: 45%"></div>
</div>

<input class="input-outlined input-outlined-sm">
<div class="paper paper-elevation-8">...</div>

Bar colours: progress-primary progress-secondary progress-success progress-info progress-warning progress-error. Elevations 1, 8, 16, 24.

Timeline and step link

Payment failed

Card declined.

A focusable step

Code

<div class="timeline-marker timeline-marker-error"></div>
<a class="step-link" href="#">Step</a>

step-link only adds the focus ring and removes the underline — wrap it around a step you want keyboard-reachable.

Integration hooks, not components

These four are declared but have nothing to show: they are hooks for other things. accordion-collapse is the collapsed state an accordion script toggles, fa-ul indents a FontAwesome list, taos-init is the animate-on-scroll library's initial state, and account-shell plus the navbar-* helpers are layout scaffolding. They are named here so Tailwind compiles them — without a reference somewhere, they do not exist at runtime.