Stream Chat CSS provides a comprehensive set of styles that power the UI components in Stream's Chat SDKs. This package is designed to make implementing beautiful, responsive chat interfaces straightforward and consistent.

• 🎨 Complete Styling - All the CSS you need to build full-featured chat applications
• 🧩 Component-Based - Organized by UI component for easy customization
• 🌈 Themeable - Extensive design system with customizable variables
• 🌐 Cross-Browser Support - Works across all modern browsers and devices
• 🧿 Accessibility - Built with a11y best practices

# With npm
npm install --save @stream-io/stream-chat-css
# With yarn
yarn add @stream-io/stream-chat-css
# With pnpm
pnpm add @stream-io/stream-chat-css

This package comes as a dependency of stream-chat-react and doesn't require explicit installation if you're already using the React component library.

Simply import the bundled CSS into your application:

import '@stream-io/stream-chat-css/dist/css/index.css';

Stream Chat CSS supports customization through CSS variables. You can override the default theme by setting your own values for the CSS variables.

:root {
 --str-chat__primary-color: #00b7ff;
 --str-chat__secondary-color: #1a1a1a;
 /* More customizations here */
}

Stream powers chat and activity feeds for over 1 billion end users. Our robust, scalable platform helps you build:

• In-app Messaging - Group chats, direct messaging, channels
• Team Collaboration - Slack-like workspaces and threaded conversations
• Live Streaming - Interactive live streams with chat
• Virtual Events - Engaging event platforms with rich chat features
• Gaming Communities - Community building with real-time chat
• Support Channels - Customer support with integrated chat

Ready to add chat to your application? Sign up for a free Stream account and start building today!

• Free tier for smaller applications and testing
• Comprehensive documentation and tutorials
• Enterprise-grade security and compliance
• Dedicated support for paid plans

🔗 Check out our interactive demos →

We've raised 38ドル million in Series B funding and are actively expanding our team of talented engineers.

Join us in building communication APIs used by over a billion end-users. You'll have the opportunity to make a significant impact on our products alongside some of the best engineers from around the world.

View Open Positions →

• The icons for UI components can be exported from Figma
• Icons are used as fonts, the font files are located in src/assets/icons
• If you need to change icons you have to regenerate the icon fonts:

1. Go to https://fontello.com/
2. Upload the svg font from src/assets/icons
3. Edit the font
4. Set the font name to stream-chat-icons and the CSS prefix to str-chat__icon--
5. Download the font, and copy the content of the font folder to src/assets/icons, and copy the mapping from css/stream-chat-icons.css to src/v2/Icon/Icon-layout.scss

MIT © Stream.io Inc.