# @askrjs/ui/scroll-area

> Published API exports for @askrjs/ui/scroll-area.

Source: [https://askrjs.com/docs/reference/api/ui/scroll-area](https://askrjs.com/docs/reference/api/ui/scroll-area)

Status: stable. Packages: @askrjs/ui/scroll-area.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 13 exports from the declarations shipped by @askrjs/ui.

### `ScrollArea`

```ts
ScrollArea: { (props: ScrollAreaProps): JSX.Element; (props: ScrollAreaAsChildProps): JSX.Element; }
```

Renders a part of `scroll-area`.

### `ScrollAreaAsChildProps`

```ts
ScrollAreaAsChildProps: ScrollAreaOwnProps & {
  asChild: true;
  children: JSX.Element;
}
```

Props for the `asChild` (polymorphic) rendering of Scroll Area.

- `asChild`: asChild: true;

- `children`: children: JSX.Element;

- `id`: id?: string | undefined;

### `ScrollAreaCorner`

```ts
ScrollAreaCorner: (props: ScrollAreaCornerProps) => JSX.Element
```

Renders the `scroll-area-corner` part of `scroll-area`.

### `ScrollAreaCornerProps`

```ts
ScrollAreaCornerProps: BoxProps<'div', HTMLDivElement>
```

Props for Scroll Area Corner.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ScrollAreaOwnProps`

```ts
ScrollAreaOwnProps: {
  children?: unknown;
  id?: string;
}
```

Own props for Scroll Area, before merging with native element attributes.

- `children`: children?: unknown;

- `id`: id?: string | undefined;

### `ScrollAreaProps`

```ts
ScrollAreaProps: ScrollAreaOwnProps
```

Props for Scroll Area.

- `children`: children?: unknown;

- `id`: id?: string | undefined;

### `ScrollAreaScrollbar`

```ts
ScrollAreaScrollbar: (props: ScrollAreaScrollbarProps) => JSX.Element
```

Renders the `scroll-area-scrollbar` part of `scroll-area` with `role="scrollbar"`.

### `ScrollAreaScrollbarProps`

```ts
ScrollAreaScrollbarProps: BoxProps<'div', HTMLDivElement> & {
  orientation?: 'vertical' | 'horizontal';
}
```

Props for Scroll Area Scrollbar.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `orientation`: orientation?: "vertical" | "horizontal" | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ScrollAreaThumb`

```ts
ScrollAreaThumb: (props: ScrollAreaThumbProps) => JSX.Element
```

Renders the `scroll-area-thumb` part of `scroll-area`.

### `ScrollAreaThumbProps`

```ts
ScrollAreaThumbProps: BoxProps<'div', HTMLDivElement>
```

Props for Scroll Area Thumb.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ScrollAreaViewport`

```ts
ScrollAreaViewport: { (props: ScrollAreaViewportProps): JSX.Element; (props: ScrollAreaViewportAsChildProps): JSX.Element; }
```

Renders a part of `scroll-area`.

### `ScrollAreaViewportAsChildProps`

```ts
ScrollAreaViewportAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Scroll Area Viewport.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ScrollAreaViewportProps`

```ts
ScrollAreaViewportProps: BoxProps<'div', HTMLDivElement>
```

Props for Scroll Area Viewport.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/popover/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/toast/index.md)