# Styling
The SDK fits any UI. One required stylesheet, then full control — className, style, and CSS selectors.
## Required stylesheet
**Import this once in your app entry point.** Without it, the avatar container, connectivity dot, and control buttons don't render correctly.
```tsx
// app/layout.tsx
import "@avatarfactory/react/styles.css";
```
## Sizing the avatar
The canvas fills 100% of its parent container. **Always give the parent explicit dimensions.**
```tsx
{/* Fixed size */}
{/* Responsive — fills container width, preserves square ratio */}
```
> Without a sized parent, the canvas renders at zero dimensions and appears invisible. This is the most common setup mistake.
## className and style props
Pass `className` or `style` directly to the `` component to style its container div.
```tsx
{/* With Tailwind — inside a sized parent */}
{/* With inline styles — inside a sized parent */}
```
## Styling the overlays
Captions, the status banner, and the thinking indicator each take a `className`
and a `style` prop on ``, so you can restyle them without reaching into
the SDK's own CSS.
```tsx
```
> Whether an overlay exists is a **provider** decision (`transcript`,
> `statusBanner`, `thinkingIndicator` in the config); how it looks is an
> **Avatar** prop. Styling an overlay you never enabled does nothing.
> Overlays sit on top of an animated character, so test their contrast against
> the busiest frame, not a still one. Captions in particular are an
> accessibility feature — 4.5:1 against whatever moves behind them.
## Styling the connectivity dot
The dot is a DOM element with CSS classes you can target:
```css
.connectivity-dot.connected { background-color: #22c55e; } /* green */
.connectivity-dot.disconnected { background-color: #ef4444; } /* red */
```
> Colour alone is not an accessible status signal. If connection state matters
> to your users, pair the dot with text or an icon rather than relying on
> green-versus-red — roughly 1 in 12 men cannot reliably tell them apart.
## Built-in controls
Show or hide the floating start/stop buttons via the provider config:
```tsx
const config = {
// ...
controls: { enabled: false }, // hide built-in buttons; use your own UI
};
```
> `controls` is configured on `` — not as a prop on ``.
## Design patterns
### Circular avatar
```tsx
```
### Responsive hero
```tsx
Meet Luna
Your AI travel assistant
```
### Framed with status ring
```tsx
```