# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/event101. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-07

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Event](/blocks/event)
5. /
6. Slot By Slot Day Builder

# Slot By Slot Day BuilderFREE

A programme picker that builds the day beside the questions: one choice per time slot drops a session card with its room, its length, and its photograph into a running plan, and the hours left open stay on the page instead of being hidden.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/event101`

## Event101: Slot By Slot Day Builder

A programme picker that builds the day beside the questions. One choice per time slot drops a session card with its room, its length, and its photograph into a running plan, and the hours left open stay on the page instead of being hidden.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/event101"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/event101"
```

That installs the block file, the `badge23` eyebrow and `button21` action button it is built from, and the `questionnaire` primitive.

### Quick start

tsxCopy

```
import { Event101, event101Demo } from "@/components/beste/block/event101";

export default function Page() {
  return <Event101 {...event101Demo} />;
}
```

tsxCopy

```
import { Event101 } from "@/components/beste/block/event101";

export default function Page() {
  return (
    <Event101
      badge={{ label: "Build your day" }}
      heading="Four slots, and you can see the gaps you leave"
      description="Pick one thing per slot and the day fills in beside you."
      shortcuts="numbers"
      slots={[
        {
          name: "morning",
          // printed down the left of the plan
          time: "09:30",
          title: "How do you want to start?",
          choices: [
            {
              value: "keynote",
              label: "The opening talk",
              description: "One hour, one argument.",
              room: "Main hall",
              minutes: 60,
              image: {
                src: "https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04",
                alt: "A speaker alone on a round stage with the audience seated around it",
              },
            },
            {
              value: "workshop",
              label: "Hands on the tools",
              room: "Studio 2",
              minutes: 90,
              image: {
                src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f",
                alt: "Three people working at a table with their laptops open",
              },
            },
          ],
        },
        {
          name: "close",
          time: "16:30",
          title: "How does it end?",
          choices: [
            { value: "closing", label: "The closing talk", room: "Main hall", minutes: 30 },
            { value: "drinks", label: "Straight to the bar", room: "Courtyard", minutes: 90 },
          ],
        },
      ]}
      confirmation={{
        title: "Day saved",
        description: "It is in your calendar with the room numbers attached.",
      }}
      button={{ label: "Add it to my calendar", href: "https://beste.co" }}
      labels={{ submit: "Save this day", emptyLabel: "Nothing booked yet" }}
    />
  );
}
```

### Props

| Prop         | Type                   | Default | Description                                                                     |
| ------------ | ---------------------- | ------- | ------------------------------------------------------------------------------- |
| badge        | Badge                  | –       | Eyebrow above the rule, rendered with Badge23.                                  |
| heading      | string                 | –       | Section heading.                                                                |
| description  | string                 | –       | Lead paragraph, set opposite the heading.                                       |
| slots        | SlotQuestion\[\]       | \[\]    | One question per slot, in the order the day runs.                               |
| shortcuts    | "letters" \| "numbers" | –       | Prints a shortcut on every choice of the active slot.                           |
| confirmation | Confirmation           | –       | Replaces the questions once the day is saved.                                   |
| button       | ActionLink             | –       | Button21 beside the confirmation.                                               |
| labels       | Event101Labels         | {}      | Overrides for the buttons, the plan heading, the empty row, and the time units. |
| className    | string                 | –       | Merged onto the section element.                                                |

tsCopy

```
type Badge = { label: string };
type ActionLink = { label: string; href: string };
type SessionImage = { src: string; alt: string };
type Confirmation = { title: string; description: string };

type SlotQuestion = {
  name: string;
  time: string;
  title: string;
  description?: string;
  choices?: SessionChoice[];
};

type SessionChoice = {
  value: string;
  label: string;
  description?: string;
  room: string;
  minutes: number;
  image?: SessionImage;
};

type Event101Labels = {
  previous?: string;
  next?: string;
  submit?: string;
  restart?: string;
  planTitle?: string;
  emptyLabel?: string;
  totalLabel?: string;
  hour?: string;
  minute?: string;
};
```

### Behavior notes

* The plan fills in on the answer, not on the submit. Choosing a session drops it into that slot's row immediately, with its room, its length, and its photograph, so the day takes shape while it is being decided.
* Unanswered slots keep their row and their time. An empty afternoon is a visible decision rather than a missing line, which is the whole argument for building a day this way.
* `time` is a label, not a calculation. The block prints it as given and never tries to work out whether a ninety minute session overruns the next slot.
* The total is summed from the chosen sessions and formatted without a locale API, which would risk a server and client mismatch.
* Saving swaps the questions for the confirmation while the plan stays exactly where it is, so the reader checks the day against what they just agreed to. Plan it again empties every slot.
* The questions sit directly on the page rather than inside a bordered panel. One slot is on screen at a time, so a box around it is mostly empty; the plan beside it is the surface that matters.
* Every slot is required, so a day cannot be saved half-built. Drop a slot from `slots` if it should not be asked at all.

## More Event blocks

[View all Event](/blocks/event)

[](/block/event29)

PRO

event29

### Personal Schedule Builder

Interactive session picker with add/remove toggles, personal schedule summary, and calendar export. Perfect for multi-track conferences where attendees build agendas.

[](/block/event98)

PRO

event98

### Multi-City Tour Dates

A tour schedule listing each city as a linked hairline row with its venue, date, and remaining seats, muting the sold-out stops, beside a sticky tile that floats a live locations card.

[](/block/event94)

PRO

event94

### Featured Session Schedule

An events section that opens with a split featured card pairing a photo with date, time, and format lines, then lists the rest of the schedule as rows separated by hairlines, each with a bordered date tile, host meta, seat count, and register action.

[](/block/event102)

PRO

event102

### Open Hours Session Rows

Upcoming sessions as hairline rows, each opening with the date set as a figure, then the session and what it covers, with its seat state and a booking link on the end.

[](/block/event95)

PRO

event95

### Filterable Day Agenda

A conference agenda whose track pills are derived from the sessions and carry live counts, narrowing a timed list of hairline rows that align the slot, the session, and its speaker and room.

[](/block/event16)

PRO

event16

### Panel Discussion Section

Panel session card featuring moderator highlight, panelist grid, discussion topic, and scheduled time. Perfect for industry panels and expert roundtables.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.