ProjectPanel
StableA project's instructions and files, shared by every chat in it.
Also known as project sidebar, workspace panel, knowledge
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A support project
Customer support
24 chatsReplies to customers of the Acme store.
Instructions
Answer as the Acme support team. Be warm and brief, under 120 words. Always check the refund policy before promising a refund, and never share another customer's order details. If a customer is upset, apologise once and move straight to what we can do.
Files
- Brand voice guide.pdf14 pages
- Q3 support tickets.csv2,310 rows
- Refund policy.docx3 pages
41,800 of 200,000 tokens used
<ProjectPanel
name="Customer support"
description="Replies to customers of the Acme store."
chatCount={24}
instructions={instructions}
files={files}
onEditInstructions={edit}
onAddFiles={add}
onRemoveFile={remove}
capacity={{ used: 41800, total: 200000 }}
/>Show all the instructions, or remove a file: focus moves to the next.
When to use it
Gives people one place to set how the AI works on a body of work, and what it knows, for every chat at once.
Made of: Name and chat count · Description · Instructions with Edit · Files with Add and Remove · Knowledge bar
Use it for
- A side panel on a project page.
- Showing what every chat in a project starts with.
Not for
- What the AI can see in one chat: use ContextPanel.
- The list of chats: use ConversationList.
- Saved memories about the person: use MemoryList.
Do and avoid
Refund letters
Instructions
Keep letters under 150 words. Plain English. No threats.
Files
- Refund rules.md4 pages
Refund letters
Instructions
None
Files
None
Do
- Show the instructions people wrote, word for word.
- Say what an empty project needs.
- Show how full the knowledge is before it is full.
Avoid
- Do not hide that every chat reads these files.
- Do not cut instructions off without Show all.
On a phone
- Each file row is at least 40px tall and its remove button grows to 44px on touch screens.
- Long instructions fold after three lines.
Seen in products
- Claude Projects are workspaces with their own chats and knowledge base, and every chat starts with the project's files and instructions.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| namerequired | string | none | The project's name. |
| description | string | none | One line about what it is for. |
| instructions | string | none | How the assistant should work in every chat of this project. |
| onEditInstructions | () => void | none | Opens the instructions to edit. |
| filesrequired | ProjectFile[] | none | Files every chat can read: { id, name, detail? }. |
| onAddFiles | () => void | none | Opens a way to add files. |
| onRemoveFile | (id: string) => void | none | Removes a file. Focus moves to the next one. |
| capacity | { used: number; total: number } | none | How full the project's knowledge is, in tokens. The bar turns amber past 90%. |
| chatCount | number | none | How many chats belong to the project. |
| labels | ProjectPanelLabels | none | Overrides every line of text. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 2 | Level of the project name's heading. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- empty
- No instructions and no files: each says in one line what it is for.
- long instructions
- Folded after three lines, with Show all.
- nearly full
- The knowledge bar turns amber past 90%.
- file removed
- Focus moves to the next file's remove button, or to the Files heading when none are left, and a status line says what was removed.
Tokens
Change one of these and every part that uses it follows.
--surface--line--hover--fg-muted--attention--radius-card
Built in
- The panel is a region named by the project, with headings for Instructions and Files.
- Show all says whether the instructions are open.
- Removing a file moves focus to the next file, or to the Files heading, and a status line says what was removed.
What you need to do
- Set headingLevel so the project name fits your page (2 by default).
- Give files their real names.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide