Stream Chat CSS

Beautiful, ready-to-use styling for Stream Chat SDKs

📝 Overview

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

🚀 Installation

# 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

💻 Usage

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.

Adding the styles to your app

Simply import the bundled CSS into your application:

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

Custom Theming

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 */
}

🔍 Why Choose Stream?

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

✨ Try Stream for Free

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're Hiring!

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 →

🔣 Icons - for Stream Developers

• 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

📄 License

MIT © Stream.io Inc.