Skip to content

Latest commit

 

History

History
107 lines (74 loc) · 4.62 KB

README.md

File metadata and controls

107 lines (74 loc) · 4.62 KB

Stream Chat CSS

Stream logo

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

NPM License Build Status

📝 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.