We're always looking for exceptional people. If you're passionate about what we're building but don't see a perfect match, send us your resume. We'll keep you in mind for future opportunities.
Bottom-of-page careers CTA for general applications with email, action buttons, and company highlight badges. Captures candidates without matching roles.
A centered, muted-panel careers CTA that renders an optional <strong>-highlighted heading, a description paragraph, a mailto: email link, a row of link buttons, and a wrapping row of highlight badges, so candidates without a matching role can still apply.
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.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/careers27?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/careers27?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/careers27.tsx, plus the badge and button shadcn/ui primitives it uses for the highlight badges and action buttons.
The installed file exports careers27Demo alongside the block: the exact props behind the preview above. Spread it to get a working speculative-application CTA in one line.
import { Careers27, careers27Demo } from "@/components/beste/block/careers27";
export default function CareersPage() {
return <Careers27 {...careers27Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Careers27 } from "@/components/beste/block/careers27";
export default function CareersPage() {
return (
<Careers27
heading="Don't see the <strong>right role?</strong>"
description="Send us your resume and we'll keep you in mind."
email="[email protected]"
buttons={[
{ label: "Send Your Resume", href: "/apply" },
{ label: "View All Positions", href: "/jobs", variant: "outline" },
]}
highlights={["Remote-Friendly", "Competitive Equity"]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | – | Section heading, supports inline <strong> rendered via dangerouslySetInnerHTML |
description | string | – | Paragraph below the heading |
email | string | – | Address rendered as a mailto: link |
buttons | Button[] | [] | Action buttons wrapped in Link |
highlights | string[] | [] | Labels rendered as secondary badges |
className | string | – | Extra classes for the outer <section> |
type Button = {
label: string;
href: string;
variant?: "default" | "secondary" | "outline";
};heading, description, and email only appear when truthy, and the button and badge rows only appear when their arrays have length > 0, so passing no props renders just the empty muted panel.heading is injected with dangerouslySetInnerHTML, and only nested <strong> elements are styled (they pick up text-primary and font-semibold); any markup you pass is rendered as raw HTML, so trusted input only.Button asChild wrapping a Next.js Link, so every href is treated as a client-side navigation target; use full URLs for external links.variant falls back to "default" when omitted, mapping to the standard shadcn/ui default, secondary, and outline styles.mailto: anchor; there is no submit handler, form, or callback, so button clicks navigate and nothing captures the application in-component.buttons and highlights are keyed by array index, so reordering or filtering them at runtime can cause React reconciliation churn.max-w-4xl and center-aligned; buttons and badges wrap via flex-wrap rather than scrolling, and there is no internal height limit.