> For the complete documentation index, see [llms.txt](https://sdkdocs.deva.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sdkdocs.deva.me/components/basic-usage/customization.md).

# 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:

```tsx
{/* 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

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

***

## Common Layouts

### Sidebar

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

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

### Tabs

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

```tsx
{/* 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:

```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](/components/basic-usage.md)
* [Props Reference](/components/basic-usage/props-reference.md)
* [Components Overview](/components/overview.md)