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

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.

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>

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>