Viora LogoViora UI
Login

Team Selector

Group selector with a different style.

demo-team-selector.tsx
Loading source code...

Installation

pnpm dlx viora-ui add team-selector
npx viora-ui add team-selector
yarn viora-ui add team-selector
bunx --bun viora-ui add team-selector

Usage

import { TeamSelector } from "viora-ui";
import { TeamSelector } from "viora-ui";

export default function TeamSelectorDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <TeamSelector />
    </div>
  );
}

API Reference

TeamMember

PropTypeDefaultDescription
idstring-Configuration for id.
avatarUrlstring-Configuration for avatarUrl.
namestring-Configuration for name.

TeamSelector

PropTypeDefaultDescription
defaultValue?number-Configuration for defaultValue.
onChange?(size: number) => void-Callback fired on change event.
className?string""Additional CSS classes for custom styling.

Built by Otis

Last updated: 9/13/2026