Orbit

Items that circle a center while staying upright. Nest one for a second ring.

Installation#

pnpm dlx shadcn@latest add @balick/orbit

Or pass the full URL: https://ui.balick.me/r/orbit.json

Usage#

import { Orbit } from "@/components/ui/orbit"

export function Integrations() {
  return (
    <Orbit size="14rem" center={<Logo />}>
      <Chip>Mail</Chip>
      <Chip>Calendar</Chip>
      <Chip>Drive</Chip>
    </Orbit>
  )
}

Props#

Prop	Type	Default	Description
`center` What sits in the middle. It can be another Orbit.	`React.ReactNode`	—	What sits in the middle. It can be another Orbit.
`size` Diameter of the ring, as a CSS length.	`string`	"16rem"	Diameter of the ring, as a CSS length.
`duration` Duration of one turn, as a CSS time.	`string`	"30s"	Duration of one turn, as a CSS time.
`reverse` Turn counter-clockwise.	`boolean`	false	Turn counter-clockwise.
`ring` Draw the ring.	`boolean`	true	Draw the ring.