> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive Design

> How to apply responsive styles for different screen sizes in Sabo.

Sabo is built with a **mobile-first** approach using Tailwind CSS. This means styles applied without any prefixes target mobile screens, and you add prefixes to apply styles for larger screens.

## Breakpoints

Tailwind CSS uses a default set of breakpoints. You can customize them, but Sabo uses the standard configuration:

| Breakpoint | Minimum Width | CSS Prefix                   |
| :--------- | :------------ | :--------------------------- |
| `sm`       | 640px         | `@media (min-width: 640px)`  |
| `md`       | 768px         | `@media (min-width: 768px)`  |
| `lg`       | 1024px        | `@media (min-width: 1024px)` |
| `xl`       | 1280px        | `@media (min-width: 1280px)` |
| `2xl`      | 1536px        | `@media (min-width: 1536px)` |

## Applying Responsive Styles

To make a design responsive, use breakpoint prefixes with Tailwind's utility classes. Classes without a prefix apply to all screen sizes (mobile-first), and prefixed classes override the base styles at a specific breakpoint and above.

For example, let's create a layout that is a single column on mobile and a two-column grid on larger screens.

```tsx ResponsiveLayout.tsx theme={null}
export function ResponsiveLayout() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div className="bg-muted p-4 rounded-lg">Column 1</div>
      <div className="bg-muted p-4 rounded-lg">Column 2</div>
      <div className="bg-muted p-4 rounded-lg">Column 3</div>
    </div>
  );
}
```

* **`grid-cols-1`**: On mobile (the default), the grid has one column.
* **`md:grid-cols-2`**: On screens 768px and wider, the grid changes to two columns.
* **`lg:grid-cols-3`**: On screens 1024px and wider, it becomes a three-column grid. The `lg` style will persist for all larger screen sizes (`xl`, `2xl`, etc.) unless overridden.

<Info>
  You can apply these prefixes to any Tailwind utility class, such as `lg:text-lg`, `sm:p-8`, `md:flex`, etc.
</Info>

## Responsive Hooks

For more complex responsive logic in your components, Sabo provides two helpful custom hooks.

<AccordionGroup>
  <Accordion title="useIsMobile()">
    This hook returns `true` if the current screen width is less than 768px (the `md` breakpoint). It's useful for conditionally rendering different components on mobile vs. desktop.

    **Location**: `src/hooks/use-mobile.ts`

    ```tsx ClientComponent.tsx theme={null}
    "use client";

    import { useIsMobile } from "@/hooks/use-mobile";

    export function ClientComponent() {
      const isMobile = useIsMobile();

      if (isMobile) {
        return <div>This is the mobile view.</div>;
      }

      return <div>This is the desktop view.</div>;
    }
    ```

    <Warning>
      This hook relies on browser APIs (`window`) and must be used in a Client Component (`"use client"`).
    </Warning>
  </Accordion>

  <Accordion title="useMediaQuery()">
    For more granular control, `useMediaQuery` lets you check against any custom CSS media query. It returns `true` if the query matches.

    **Location**: `src/hooks/use-media-query.ts`

    ```tsx AdvancedComponent.tsx theme={null}
    "use client";

    import { useMediaQuery } from "@/hooks/use-media-query";

    export function AdvancedComponent() {
      const isLargeScreen = useMediaQuery("(min-width: 1024px)");

      return (
        <div>
          {isLargeScreen ? (
            <p>You are viewing this on a large screen.</p>
          ) : (
            <p>Your screen is smaller than 1024px.</p>
          )}
        </div>
      );
    }
    ```
  </Accordion>
</AccordionGroup>