---
title: Add responsive behavior
description: Use shared breakpoint and interaction hooks when CSS alone cannot express the behavior.
order: 20
toc:
  - id: breakpoints
    title: Breakpoints
  - id: server-rendering
    title: Server rendering
  - id: ripple
    title: Ripple interaction
---

## Breakpoints {#breakpoints}

```tsx
import { useBreakpoint, useIsMobile } from "@workspace/ui/hooks/use-breakpoint"

const breakpoint = useBreakpoint()
const isMobile = useIsMobile()
```

Prefer CSS responsive variants for visual changes. Use these hooks only when component behavior or mounted content must change.

## Server rendering {#server-rendering}

The breakpoint store uses a deterministic desktop server snapshot. `getBreakpointInitializationScript` can assign the matching root class before hydration when the application needs CSS and behavioral breakpoints to agree immediately.

## Ripple interaction {#ripple}

`useRipple` returns a ref callback that adds pointer-driven feedback to an interactive element. The element should establish a positioned containing block so the generated overlay uses the correct bounds.