Stack UI
Build assistant interfaces from small React components. Each page starts with a live example and its source, followed by usage and a component reference.
Using these examples
Section titled “Using these examples”The examples import the workspace package @stack/ui. They use its public APIs and default styling. Imports from @/components/ui/* refer to consumer-owned shadcn primitives configured through your components alias. Interactive demos run locally in your browser; they do not call an assistant service.
Components
Section titled “Components”- Attachment: Preview and download an attached file.
- Attachment drop zone: Accept files dropped onto a region.
- Code block: Display source code with copy and preview actions.
- Composer: Write and submit a message.
- Content block: Frame custom content with a title and shared actions.
- Context usage: Show how much of the context window is in use.
- Copy button: Copy a value with success and error feedback.
- File editor: Inspect file content with a shared header and view controls.
- File explorer: Browse a directory tree.
- File icon: Identify a file by its extension.
- File reference: Open a file preview from a path reference.
- Header bar: Arrange a title, description, and actions.
- Hint: Explain an existing control with a tooltip.
- Markdown: Render Markdown in an assistant interface.
- Message: Compose an assistant or user message.
- Message queue: Show messages waiting to be sent.
- Questions: Collect structured answers before continuing.
- Sidebar: Open a navigation panel beside your content.
- Sticky message: Keep the nearest user prompt available while scrolling.
- Submission: Show delivery status and offer draft recovery.
- Thread: Arrange a scrollable conversation.