Builder to create widgets

Building Blocks for the Web

Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

Browse BlocksAdd a block
Files
app/sidekick/page.tsx
import { SidekickStandalone } from "@/components/ui/sidekick-01/components/sidekick-standalone"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <SidekickStandalone />
      </div>
    </div>
  )
}
A standalone chat UI that demonstrates the Sidekick layout with a mocked assistant response.
sidekick-01
sidekick-01
Files
app/sidekick-02/page.tsx
import { SidekickChatbot } from "@/components/ui/sidekick-02/components/sidekick-chatbot";

export default function Page() {
  return (
    <div className="relative min-h-svh">
      <SidekickChatbot />
    </div>
  );
}
A floating chatbot button that opens a standalone Sidekick panel with a preview toast.
sidekick-02
sidekick-02
Files
app/sidekick-03/page.tsx
import { SidekickFloating } from "@/components/ui/sidekick-03/components/sidekick-floating";

export default function Page() {
  return (
    <div className="relative min-h-svh">
      <SidekickFloating />
    </div>
  );
}
A floating card that uses SidekickProvider with an inset area and a full chat panel.
sidekick-03
sidekick-03