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/prompt-input-01/page.tsx
import { AgentPromptInput } from "@/components/ui/prompt-input-01/components/agent-prompt-input"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <AgentPromptInput />
    </div>
  )
}
A prompt input clone of Chatgpt home page page.
prompt-input-01
prompt-input-01
Files
app/prompt-input-02/page.tsx
import { CursorPromptInput } from "@/components/ui/prompt-input-02/components/cursor-prompt-input";

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-start justify-center p-6 pt-20 md:p-10 md:pt-28">
      <CursorPromptInput />
    </div>
  );
}
A Cursor cloud agent style prompt input.
prompt-input-02
prompt-input-02
Files
app/prompt-input-03/page.tsx
import { ClaudePromptInput } from "@/components/ui/prompt-input-03/components/claude-prompt-input";

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <ClaudePromptInput />
    </div>
  );
}
A Claude style prompt input with upgrade banner.
prompt-input-03
prompt-input-03