An independent product and brand studio for teams that take the work seriously.
4.9
Client rating
Engagement
After our last brand and product refresh
+118%
Revenue influenced
$12M+
Polaris is an independent product and brand studio. We hold the whole arc — strategy, identity, interface, and motion — so the idea never gets diluted in the handoff, and your team spends its time on the work that matters most.
We take a handful of clients at a time. No accounts, no busywork, no decks nobody reads — just a small room of people who would rather make one unforgettable thing than ten forgettable ones.
Large heading with dual CTAs and a rating card, a playable video with floating metric cards, and a labelled about block with large paragraphs.
Hero-scale about section: an oversized heading with dual CTAs and a desktop-only rating card, a clickable video thumbnail that opens a YouTube embed in a modal, a row of metric cards, and a labelled about block with rich paragraphs.
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/about56?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about56?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about56.tsx, the button1 component it uses for the primary CTA, the badge6 component it uses for the about label, and its dependencies.
The installed file exports about56Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { About56, about56Demo } from "@/components/beste/block/about56";
export default function Page() {
return <About56 {...about56Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { About56 } from "@/components/beste/block/about56";
export default function Page() {
return (
<About56
heading="We build brands the world keeps coming back to"
description="An independent product and brand studio for teams that take the work seriously."
primaryCta={{ label: "Start a project", href: "/contact" }}
secondaryCta={{ label: "Book a call", href: "/call" }}
rating={{ value: "4.9", label: "Client rating" }}
video={{
thumbnail: "https://images.unsplash.com/photo-1558722141-dc9be8718862?w=2000&fit=crop",
alt: "Studio team in a working session",
videoUrl: "https://www.youtube.com/embed/ScMzIvxBSi4",
}}
metrics={[
{ title: "Engagement", subtitle: "After our last refresh", value: "+118%", badge: "First 90 days" },
{ title: "Revenue influenced", value: "$12M+" },
]}
aboutLabel="About"
paragraphs={["Polaris is an independent product and brand studio."]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | – | Oversized page heading, plain text (no HTML) |
description | string | – | Supporting paragraph under the heading |
primaryCta | CtaLink | – | Primary CTA rendered as a Button1 |
secondaryCta | CtaLink | – | Secondary CTA rendered as a plain outline-styled link |
rating | { value: string; label: string } | – | Rating card with a five-star row, shown desktop-only |
video | { thumbnail: string; alt: string; videoUrl: string } | – | Clickable thumbnail that opens videoUrl in a modal iframe |
metrics | Metric[] | [] | Metric cards under the video |
aboutLabel | string | – | Eyebrow text rendered in a Badge6 above the paragraphs |
paragraphs | string[] | [] | About copy paragraphs; each supports inline HTML |
className | string | – | Extra classes for the outer <section> |
type CtaLink = { label: string; href: string };
type Metric = { title: string; subtitle?: string; value: string; badge?: string };isPlaying to true and renders a fixed, full-viewport modal with a YouTube iframe pointed at ${video.videoUrl}?autoplay=1; closing happens by clicking the backdrop or the X button (the inner panel calls stopPropagation so clicks inside it don't close the modal).rating card only renders on lg and above (hidden lg:flex); it is not shown at all on mobile or tablet widths.secondaryCta is not rendered through Button1; it's a manually styled Link with an outline look, distinct from primaryCta's pill button.value to the bottom of the card (mt-auto) regardless of whether subtitle is present, so cards with and without a subtitle still align on the value baseline.paragraphs entries render via dangerouslySetInnerHTML, so <strong> (or other inline HTML) inside a paragraph string is honored, as the demo does to bold "your team".