Customization

The ChannelFeed component has fixed internal styling. Customize by wrapping in a container.

---

Styling Limitations

What You Can Customize

Container Level Only:

• ✅ Dimensions (width, height)

• ✅ Spacing (padding, margin)

• ✅ Borders and shadows

• ✅ Layout positioning

What You Cannot Customize

Internal Styling:

• ❌ Color scheme (dark theme only)

• ❌ Typography (fonts, sizes)

• ❌ Component layout structure

• ❌ Buttons, avatars, text styles

The component maintains consistent styling for functionality and accessibility.

---

Container Patterns

Basic Wrapping

Control dimensions and spacing:

{/* Centered with max-width */}
<div className="w-full max-w-2xl mx-auto">
  <ChannelFeed handle="announcements" />
</div>

{/* Full-width */}
<div className="w-full">
  <ChannelFeed handle="community" />
</div>

{/* Full-height */}
<div className="h-screen">
  <ChannelFeed handle="support" />
</div>

{/* With borders */}
<div className="border rounded-lg overflow-hidden">
  <ChannelFeed handle="updates" />
</div>

Responsive Layout

<div className="w-full md:w-3/4 lg:w-1/2 mx-auto">
  <ChannelFeed handle="responsive" />
</div>

---

Common Layouts

Sidebar

<div className="flex h-screen">
  <div className="flex-1">
    <YourMainContent />
  </div>

  <div className="w-96 border-l">
    <ChannelFeed handle="activity" />
  </div>
</div>

Tabs

<Tabs>
  <TabsList>
    <TabsTrigger value="announcements">Announcements</TabsTrigger>
    <TabsTrigger value="general">General</TabsTrigger>
  </TabsList>

  <TabsContent value="announcements">
    <ChannelFeed handle="announcements" />
  </TabsContent>

  <TabsContent value="general">
    <ChannelFeed handle="general" />
  </TabsContent>
</Tabs>

---

Performance

Multiple Instances: Each feed maintains separate state and API connections. Limit visible feeds:

{/* Good: Single feed */}
<ChannelFeed handle="main" />

{/* Okay: 2-3 feeds in grid */}
<div className="grid grid-cols-2 gap-4">
  <ChannelFeed handle="feed1" />
  <ChannelFeed handle="feed2" />
</div>

{/* Avoid: 4+ simultaneous feeds - use tabs instead */}

---

CSS Isolation

Component styles use deva- prefix to avoid conflicts with your CSS:

.deva-bg-black { background-color: #000; }
.deva-text-white { color: #fff; }

This means you can safely use ChannelFeed with any CSS framework.

---

Related

• Basic Usage

• Props Reference

• Components Overview