Sandbox component

[FranciscoMoretti]

Would love to add this Sandbox component

DEMO:

cursorful-video-1762944928322.mp4

Here's a rough version of what it could look like.

Would love some guidance on what tasks are required to add a new component

[vercel]

@FranciscoMoretti is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[haydenbleasel]

@FranciscoMoretti love this and the name Sandbox is great.

Steps for adding a new component:

1. Create the file in packages/elements/src
2. Create one or multiple examples in packages/examples/src
3. Create a doc in apps/docs/content/docs/components in the most appropriate category
4. Copy one of the existing docs for example structure
5. Wire up your example files with the <Preview /> component

[FranciscoMoretti]

PR is ready @haydenbleasel. New implementation is slightly different from the one in the video. Hopefully better

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ai-elements-registry	Ready	Preview	Comment	Nov 27, 2025 8:40pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
ai-elements-docs	Ignored			Nov 27, 2025 8:40pm

[FranciscoMoretti]

I've updated to be compatible with the latest changes in the code block component

I've moved the copy button to inside the sandbox code block (instead of being at the tab level) so that it can use the context

chrome_tXE3DZxIJb.mp4