Skip to content
txbrendan/ui

Website Components

20 website components. These are the parts of a marketing site, like a navbar, hero, pricing table, or footer. One install adds the part and every component it uses, and its files are yours to edit. Each preview is the real part in the current theme.

  • Introducing Plus

    One plan for the whole team: Schedule, Chat, and Stats.

    Everything in one plan
    • Schedule, with who's coming

    • Chat and voice notes, by team

    • Stats and trends, all year

    Generous limits, shared across all three apps.See what Plus adds

    Recommended: a trigger people can come back to, and a review step before checkout

    On your site, add showOnce="plus-launch" so it also opens once for each visitor.

    the review step on its own page

    Step 2 of 2

    Review your new plan

    Agree to each term to go on to checkout.

    jordan@example.com

    This is how you sign in.

    One account for all three apps

    We set up Schedule, Chat, and Stats with the account details you already gave us.

    Linking is permanent

    After checkout, the linked apps cannot be split apart again.

    Extras are billed on top

    Extra storage and SMS reminders are charged by use, and are not in the monthly price.

    Plus$12/monthplus any tax where you live

    Plus

    $12/month

    plus any tax where you live

    • One sign-in for all three apps

      The same login works in Schedule, Chat, and Stats.

    • Your data stays with you

      Your teams, chats, and results all move to the new plan.

    • More included use

      Limits are shared across the apps, and refresh each week.

    • Extras are billed by use

      Extra storage and SMS reminders cost more, at the listed rates.

    Plus

    jordan@example.com

    Member since Oct 2026

    Everything in one plan

    news with no checkout: the button links on

    narrow container

    Introducing Plus

    One plan for the whole team: Schedule, Chat, and Stats.

    Everything in one plan
    • Schedule, with who's coming

    • Chat and voice notes, by team

    • Stats and trends, all year

    Generous limits, shared across all three apps.See what Plus adds

    A launch popup with feature tiles and one button, plus an optional review step that takes people from the news to checkout.

  • All posts
    Guides6 min read

    How to plan a release

    The steps a team can follow from the first list of changes to the day it ships.

    Priya RamanProduct lead

    A release goes better when everyone knows what is in it, who owns each part, and when it ships. These are the four steps a team can follow, from the first list to the day it goes out.

    Write down the scope

    Start with a short list of what the release changes. Keep each line to one change, and link it to its ticket, so anyone can see the detail.

    • New features, each with one owner.
    • Fixes that people asked for.
    • Anything that changes how people sign in or pay.

    Set the dates

    Pick the day it ships first, then work back from it. Leave a few days between the last change and the release, for testing.

    1. The last change is merged.
    2. Testing starts on the release branch.
    3. The release notes are written.
    4. The release ships.

    When a date slips

    Keep the days for testing, and move the release day instead. Say the new date in the same place you said the first one.

    Move the release, not the testing.

    Release checklist

    Check the build

    Run the checks on the release branch with npm run check. Every check must pass before the build goes out.

    git switch -c release/2.4
    npm ci
    npm run check
    npm run build
    The release plan, one dot for each change.

    Share the release notes

    Post the notes where people already look, like the changelog and the team channel. Link each line to its docs, and name who to ask about it.

    title, date, and body only

    Notes from the October planning day

    We met for one day to plan the next quarter. These notes cover what we agreed, and what we left for later. Ask in the team channel if a line is not clear.

    The next planning day is in January. The date goes out a month before.

    narrow container

    All posts
    Guides6 min read

    How to plan a release

    The steps a team can follow from the first list of changes to the day it ships.

    Priya RamanProduct lead

    Start with a short list of what the release changes. Keep each line to one change.

    git switch -c release/2.4 && npm ci && npm run check && npm run build

    The reading layout of one blog post: a back link, tag, title, lead, author, date, and cover, then the post as plain HTML, with a list of its sections on wide screens.

  • Set the team up

    Role examples

    OwnerAdminLeadManagerMemberBilling admin

    Leads plan events and check who is coming. Everyone answers for themselves.

    Everyone answers

    Tuesday planning
    • Tom H.Going
    • Sam D.Going
    • Ravi P.Can't go

    Every meeting and event has an answer-by date. People change their answer until then.

    Watch the count

    Who's coming
    • Fri, company all-hands2473%
    • Tue, whole-team sync3194%
    • Thu, design workshop1478%

    The number going sits on the event, with the people who haven't answered beside it.

    previews with icons and links, size lg

    6 haven't answered by Thursday

    Fri 14:30 · Company all-hands

    Send reminders

    Reminder emails

    Pick the event, and the email takes people straight back to it.

    Google Calendar14:30
    Apple Calendar14:30
    Outlook14:30

    A calendar that updates itself

    When an event changes, calendar apps pick up the new time.

    1. 1Website redesign80%
    2. 2Mobile app60%
    3. 3Billing40%

    Goals

    Track goals by team and quarter. Everyone finds their own progress.

    feature grid: icons only

    Team operations

    Availability, reminders, calendar feeds, and roles sit together around the week.

    Team conversations

    Talk about the work and keep in touch in the channels you belong to.

    Saved agendas

    Attach a saved agenda to another event, or copy it for the next one.

    Answer for someone

    The person who texts their lead still gets counted. The lead sets the answer.

    Check-in notes

    Review someone's past check-ins before deciding what to discuss next.

    Calendar feed

    Add the team calendar to any calendar app once, and it stays up to date.

    Download your data

    Any member can download what we hold about them, without asking first.

    Delete an account

    Members can ask for their account to be deleted, across every record.

    Always in sync

    When an event changes, every phone shows the new time on its next refresh.

    narrow container

    Watch the count

    Who's coming
    • Fri, company all-hands2473%
    • Tue, whole-team sync3194%
    • Thu, design workshop1478%

    The number going sits on the event.

    Reminder emails

    The email takes people straight back to the event.

    A grid of soft gray cards that show off features, each with a live preview, an icon, or a link.

  • The closing band of a marketing page, above the footer: a big two-tone headline, one short line, and a main action with an optional second one.

  • A list of product releases for a changelog page, newest first: each with its date and version, a title, a short summary, an optional cover, and its changes marked New, Improved, Fixed, or Removed.

  • A table that compares your product with other ways of doing the job, with a dot, a ring, or a dash for included, manual, and missing.

  • A wide field of dithered dots, with bands of theme color that wind across it, as art behind a hero or a section title.

  • FAQ

    beta

    Questions and answers in one soft gray column, each answer opening in place.

  • A grid of feature cells split by thin lines, each with a title, a description, and a picture above or below.

  • Footer

    beta

    The bottom of a site: brand, a line about you, social links, columns of links, the legal line, and drawn ridges.

  • A section's big two-tone headline: the claim in full ink, then the rest in gray.

  • Hero

    beta

    The top of a landing page: a big claim, a lead with a call to action, customer logos, and a framed product preview.

  • A "Used by teams at" row of logos that scrolls slowly in a loop and stands still for reduced motion.

  • A navbar whose menus share one floating box. Moving from menu to menu, the box glides to the new menu and changes size to fit it, while the links slide across.

  • Navbar

    beta

    The bar across the top of a site: brand, links, and actions, with a menu on narrow screens.

  • A grid of blog posts, each one link with a cover, a tag, a title, an excerpt, a date, and its author, with an optional row of tags to narrow them.

  • A row of plan cards, light and dark, with mono labels, label and value rows, what is included, and a call to action.

  • A row of two to four big figures, each with a short label and an optional note, for an About page or a landing page.

  • A grid of people for an About page, each with an avatar, name, role, a line about them, and icon links, with an optional cell for open roles.

  • A headline over a masonry wall of quote cards, each with a name, role, and avatar, and an optional Show more.