Team chat

Build with Vlak
North studioOne place for the work
North studio / Channel

studio

The place for work in progress, small decisions, and a second pair of eyes.

Sample conversation · Today
Tomas09:14

The client approved the poster direction. Two small changes to the event details before we send it to print.

Mara09:22Pinned

The updated proof is ready to review. I’ve marked both changes in the margin.

Inez09:26

I’ll check the event details against the brief after our morning review.

Local messages · ⌘ / Ctrl + Enter
Local demoMessages stay in this tab

Choose a channel → send a message → reply, acknowledge, or pin it

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

Messages, replies and channel changes stay in this tab. No users are contacted and no messaging backend is connected.

Installation and base examples

Inside the interface

A team chat for coordinating studio work. Search, create, or edit a channel, send a message, and keep its follow-up in a dedicated thread. Acknowledgements and pinned messages update locally, while reply counts follow the actual thread history. The channel overview gives way to a focused discussion when a message needs attention.

Channel creation, purpose edits, messages, acknowledgements, pins, and replies stay in this tab. Duplicate channel names are rejected. No messages or notifications are sent to other people.

Watch the 20-second walkthrough

A short walkthrough of the working team chat study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the Team chat starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Avatar identifies contributors in messages and threads. Input and Textarea edit channel details and supply separate message and reply composers.
  • Buttons create channels, acknowledge and pin messages, and open threads. Card groups the channel editor’s context; the conversation remains selectable text with separate actions.
  • A wide workspace keeps the channel beside its thread. Narrow containers use focused channel, conversation, thread, and editor screens with pinned actions and restored focus.
  • On mobile, channels, conversations, threads, and channel editing use focused screens. The conversation and thread each keep their own pinned composer, while Back restores the selected channel or message and its keyboard focus.