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

``bash


With npm

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.

$3

Simply import the bundled CSS into your application:

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

$3

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

`css
: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

$3

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.