Bootboat v0.1

Sailboat UI component styles as reusable CSS classes, similar to how Bootstrap works. Built on Tailwind CSS v4.

Requires: Tailwind CSS v4 + @tailwindcss/forms (base strategy) · Alpine.js (for interactive components) · Setup instructions

Typography

Headings, body text, and links.

.h1 — .h6

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

.text-body, .text-body-lg, .text-body-xs, .text-muted, .text-lead

Body text — default paragraph style

Body large — slightly bigger paragraphs

Body extra small — fine print and metadata

Muted text — de-emphasized content

Lead text — subtitle below a heading

.link, .link-sm, .link-xs, .link-danger

Standard link

Small link — same weight, 14px

Extra-small link — 12px, good for "Forgot password?"

Danger link

.h1-light, .h2-light, .h3-light

Light heading 1
Light heading 2
Light heading 3

Buttons

Color variants, sizes, icons, and disabled states.

All variants

Sizes — .btn-sm / default / .btn-lg

Full width — .btn-full

With icon

Icon-only — .btn-icon-primary, .btn-icon-secondary

Disabled

Glass & White — for colored backgrounds

Button Group

Segmented controls for navigation, pagination, or selectors.

Year selector pattern

2026

With active state

Forms

Inputs, selects, checkboxes, labels, help/error text, and layout helpers.

This is a help message.

Please enter a valid email address.

Card

Content container. Size classes (.card-sm, .card-md, .card-lg) include the base .card styles + max-width.

.card-sm + .card-body

Small card

max-w-sm (384px)

.card-md + .card-body

Medium card

max-w-md (448px) — good for auth forms.

.card-lg + .card-body

Large card

max-w-lg (512px) — wider forms and content.

Navbar

Sticky top bar — brand left, actions right.

Dropdown

Requires Alpine.js. Accessible with aria-expanded, Escape to close.

Settings Help
Log out

Modal

Dialog overlay. Two patterns: body-only, or with footer actions.

Alerts / Flash Messages

Four color variants. Add an SVG with .alert-icon for the leading icon.

Info: This is an informational message.
Success! Your changes have been saved.
Warning: Please review before continuing.
Error: Something went wrong. Please try again.

Badge

Default shape is pill (rounded-full). Add .badge-square for rounded-md corners.

Pill (default)

Primary Success Warning Danger Info Gray Dark

Squared — add .badge-square

Primary Success Warning Danger Info Gray Dark

Large — add .badge-lg

Large pill Large squared

With dot indicator

Online Overdue Inactive

Divider

Horizontal separators — plain or with centered text.

.divider + .divider-text

Content above

OR

Content below

.divider-line

Section one

Section two

Table

Wrap in .table-wrapper for rounded borders + horizontal scroll. Add .table-striped or .table-hover to rows.

Default

Name Email Role Status
Alice Johnson [email protected] Admin Active
Bob Smith [email protected] Editor Active
Carol Davis [email protected] Viewer Inactive

Striped + Hoverable

Invoice Date Amount Status
#1001 Jan 15, 2026 $1,200.00 Paid
#1002 Jan 22, 2026 $850.00 Pending
#1003 Feb 01, 2026 $2,340.00 Paid
#1004 Feb 03, 2026 $475.00 Overdue

Tabs

Underline-style tabs. Requires Alpine.js for interactivity.

Profile content — manage your name, avatar, and bio.

Settings content — configure preferences and notifications.

Notifications content — you have 8 unread notifications.

Billing content — view invoices and payment methods.

Breadcrumb

Navigation trail. Use .breadcrumb-bg for a background variant.

Default (with slashes)

With chevrons

With background

List

Styled lists with icons or borders.

With icons

  • Share team inboxes
  • Deliver instant answers
  • Manage your team with reports

Bordered list

  • Share team inboxes

    Whether you have a team of 2 or 200, our shared inboxes keep everyone on the same page.

  • Deliver instant answers

    An all-in-one customer service platform that helps you balance everything.

  • Manage your team with reports

    Measure what matters with easy-to-use reports.

Media Object

Image + text layout. Align with .media-center or .media-bottom.

Default (top-aligned)

Sarah Connor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Center-aligned

John Doe

Vertically centered with the image.

Large image

Jane Smith

Using .media-img-lg for a 64px image.

Pagination

Page navigation with prev/next buttons and numbered items.

Default