Panels & Flows
Onboarding progress, a file-upload panel, a chat interface, and two modal flows.
Self-contained panels that drop into an existing screen. The two modal blocks are the exception to blocks usually managing their own state: they're controlled, so nothing renders until you pass open.
Onboarding progress
Profile
100%
Team
60%
Integrations
0%
File upload panel
Like the FileUpload component it wraps, this selects files and reports them back — sending them is still your app's job.
Click to upload or drag and drop
SVG, PNG, JPG or PDF (max. 2MB)
design-tokens.json
brand-guidelines.pdf
logo-assets.zip
Chat interface
Modal flows
Both reuse Modal's portal and focus trap rather than reimplementing them, which is why they take the same open/onClose pair.
Copy the source
Blocks are composition examples, not configurable components. Rather than adding props for a layout they don't support, copy the file into your own project and edit it: change the columns, swap the sample data, delete the parts you don't need. Nothing here introduces a primitive you can't already import on its own.
Why it works this way
Why
- The two modal blocks are controlled, so nothing renders until you pass open. They reuse Modal's portal and focus trap rather than reimplementing them.
- The file upload panel selects files and reports them back, like the FileUpload it wraps.
Don't
- Don't expect the modal blocks to manage their own open state.
- Don't expect the upload panel to send files. That is your app's job.