# 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/careers57. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

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. [Careers](/blocks/careers)
5. /
6. Open Roles With Published Bands

# Open Roles With Published Bands[PRO](/pricing)

A short roles list where the pay band sits on the row rather than behind an application, with a written empty state for when nothing is open and a speculative line underneath.

ViewCodeDocs

Base UI

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

## Careers57: Open Roles With Published Bands

A short roles list where the pay band sits on the row rather than behind an application, with a written empty state for when nothing is open and a speculative line underneath.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/careers57?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/careers57?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/careers57.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

The installed file exports `careers57Demo` alongside the block: the exact props behind the preview above. Spread it to get a working roles list in one line.

tsxCopy

```
import { Careers57, careers57Demo } from "@/components/beste/block/careers57";

export default function CareersPage() {
  return <Careers57 {...careers57Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Careers57 } from "@/components/beste/block/careers57";

export default function CareersPage() {
  return (
    <Careers57
      eyebrow="Open roles"
      heading="We hire slowly and say so"
      description="Both roles are advertised with the band we will actually pay."
      roles={[
        {
          title: "Product designer",
          team: "Product",
          location: "Lisbon or remote in Europe",
          pay: "£62,000 to £74,000",
          href: "/careers/product-designer",
        },
      ]}
      emptyState="Nothing is open at the moment."
      speculativeText="Nothing here that fits?"
      speculativeLink={{ label: "Write to us anyway", href: "/contact" }}
    />
  );
}
```

### Props

| Prop            | Type            | Default | Description                          |
| --------------- | --------------- | ------- | ------------------------------------ |
| eyebrow         | string          | –       | Badge6 label above the hairline rule |
| heading         | string          | –       | Section heading under the rule       |
| description     | string          | –       | Supporting paragraph                 |
| roles           | Role\[\]        | \[\]    | One linked row per open role         |
| emptyState      | string          | –       | Sentence shown when roles is empty   |
| speculativeText | string          | –       | Line under the list                  |
| speculativeLink | SpeculativeLink | –       | Link beside that line                |
| className       | string          | –       | Extra classes for the outer section  |

tsCopy

```
type Role = {
  title: string;
  team: string;
  location: string;
  pay: string;
  href: string;
};

type SpeculativeLink = {
  label: string;
  href: string;
};
```

### Behavior notes

* The empty state is a written sentence inside the list rather than a section, so a careers page with nothing open still says something rather than collapsing to a heading.
* The pay band is a plain string on the row, so it can be a range, a single figure or "pro rata" without a schema.
* Team and location share one line under the role title, separated by a middle dot, which keeps the row to two columns on desktop.
* The speculative line renders if either its text or its link is passed.

## More Careers blocks

[View all Careers](/blocks/careers)

[](/block/careers40)

PRO

careers40

### Open Roles

A studio jobs list with role meta, salary and apply arrows.

[](/block/careers52)

PRO

careers52

### Single Role Detail

A job description laid out as a reading column with checked responsibility lists and a candid caveat panel, against a sticky rail carrying the published salary band, level, and location alongside the apply action.

[](/block/careers56)

FREE

careers56

### Role Fit Finder

A hiring section that answers three questions instead of listing a job board: the answers land on one open role with its team, its location, and its published pay band, and the photograph beside it changes to the part of the studio that role sits in.

[](/block/careers48)

PRO

careers48

### Join The Studio

Sticky employer-value intro beside a scrollable open-roles list.

[](/block/careers51)

FREE

careers51

### Filterable Open Roles List

A light editorial careers section with a monospace eyebrow over a hairline rule, a two-column heading, and a sticky culture photo with a gradient caption beside team filter pills and hairline job rows showing location, contract type, and a hover arrow.

[](/block/careers55)

PRO

careers55

### Published Pay Bands

A pay transparency table whose track pills swap the band column while the levels, their scope, and the headcount at each stay in place, closing on the written rules that govern the numbers beside a soft panel carrying the call to action.

## 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.