Site
betaA whole product website in page files: home, pricing, a blog with a page per post, a changelog, about, and contact, with one navbar and footer, ready to run in a Next.js app.
Built from Button Variants.
Preview
The app your team is missing.
One app the whole team is in. Leads and members each get their own dashboard: who's coming, the plan, the calendar, and how each goal is going.
Used by teams at
Start with your team's people, then organize the week.
Set the team up
Leads plan events and check who is coming. Everyone answers for themselves.
Everyone answers
Every meeting and event has an answer-by date, so nobody chases replies in a chat.
Watch the count
The number going sits on the event, and the list fills in as people answer.
Who's coming, what's planned, and how goals are going. In one place.
Reminder emails
Pick the event, and the email takes people straight back to it.
A calendar that updates itself
When an event changes, calendar apps pick up the new time.
Goals
Track goals by team and quarter. Everyone finds their own progress.
The rest of the team runs from the same app.
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.
What a team gets with a workspace, and what it has without one.
| Team task | Workspace | Shared table | Group chat |
|---|---|---|---|
| Who's coming, with an answer-by date | Included | Manual work | Manual work |
| Reminder email to whoever hasn't answered | Included | Not included | Not included |
| A calendar on everyone's phone | Included | Not included | Not included |
| Team and admin roles | Included | Manual work | Manual work |
Team leads noticed first, then everyone else did.
Monday mornings used to start with forty messages. Now everyone answers in one place, and I know who is coming before I book the room.
Priya RamanDesign lead at a studio Setup took an afternoon.
Tomás OkaforOffice manager at a clinic People stopped asking me what time the all-hands is. That alone was worth it.
Elin SatoTeam lead at a library We had three spreadsheets, a group chat, and a whiteboard in the office. Now we have one list that everyone trusts.
Marcus BellHead of operations at a bakery I can see who is out before the shift starts, so I plan the queue around them.
Ana LindqvistSupport lead at an agency The reminders go out on their own. I have not chased a late reply all quarter.
Hana NovakEngineering manager at a lab
I run a team too. Request access and I will set yours up with you.
The whole team
- Who's coming, with answer-by dates
- Reminder emails
- A calendar feed for every phone
Ask us anything
Tell me how the week runs, and we'll set it up together.
- Your team's name and size
- What you use today
Questions teams ask.
Install
1. Add the registry to
components.json, once per app. Without it, the shadcn CLI looks up@txbrendanin a public list that txbrendan/ui does not control.npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
npx shadcn@latest add @txbrendan/theme3. Add the template. It also adds every component it uses. Its own files go in your
componentsfolder, and they are yours to edit.npx shadcn@latest add @txbrendan/site
Use it for
- A new product website in a Next.js app. Install it, and each page lands at its route, like app/pricing/page.tsx.
- Start from a new app. It writes app/page.tsx as your home page, and shadcn asks before it replaces yours.
- Edit each page's words in its own file, like site-pricing.tsx. The navbar, the footer, and your logo live in site.tsx, so every page shares them.
- Add a post in two places: its card in site-posts.ts, and its body in site-post-bodies.tsx, under the same slug. Each post gets its own page at /blog/<slug> when you build.
- Write each body in plain HTML, with two or more h2s for its list of sections. Give each h2 an id, so a link to a section works before the page's code loads. The body renders on the server, so it is not sent as code.
- Add a release at the top of site-releases.ts. Its version is also its id, so a link to /changelog#3-11 lands on it.
- Connect the contact form in site-contact-action.ts, which runs on your server. Until you do, the form says the message did not send.
- Each page loads only its own parts, so a visit to one page does not load the others.
Avoid it for
- An app that already has these routes. Install the page templates one at a time instead, like Pricing Page.
- A route group, like app/(site)/. Next.js builds it beside app/page.tsx with no warning, and the starter page wins.
Props
| Prop | Type | Default | What it does |
|---|
Accessibility
- Every page has one main, one h1, and the same navbar and footer, and the navbar marks the page you are on.
- Each page sets its own title and description, so each tab and search result says which page it is.
- Each page template keeps its own accessibility, listed on its page.
Examples
Install the whole site
npx shadcn@latest add @txbrendan/siteSend the contact form with your email service
"use server";
export async function sendMessage(values: Record<string, string>) {
const response = await fetch("https://api.example.com/send", {
method: "POST",
body: JSON.stringify(values),
});
if (!response.ok) throw new Error("Not sent");
}