# Parts: PopoverContent to PageLinks (/themes/sdk/reference/ui/parts-4)

```ts
import { … } from '@poltura/theme-sdk/ui';
```

## `PopoverContent` [#popovercontent]

The popover's panel, drawn over the page next to its button and kept inside the window.

```ts
PopoverContent(props: PopoverContentProps): ReactNode
```

**Props:** [`PopoverContentProps`](/themes/sdk/reference/ui/types-2#popovercontentprops)

**Example**

```tsx
import { PopoverContent } from '@poltura/theme-sdk/ui';

export function SizeNote() {
  return (
    <PopoverContent align='end' collisionPadding={8} className='w-72 p-4'>
      Runs small: pick one size up.
    </PopoverContent>
  );
}
```

## `Separator` [#separator]

A thin line that divides content.

```ts
Separator(props: SeparatorProps): ReactNode
```

**Props:** [`SeparatorProps`](/themes/sdk/reference/ui/types-2#separatorprops)

**Example**

```tsx
import { Separator } from '@poltura/theme-sdk/ui';

export function Divided() {
  return (
    <div>
      <p>Details</p>
      <Separator className='my-4' />
      <p>Reviews</p>
    </div>
  );
}
```

## `Skeleton` [#skeleton]

A pulsing placeholder block shown while content loads.

```ts
Skeleton(props: SkeletonProps): ReactNode
```

**Props:** [`SkeletonProps`](/themes/sdk/reference/ui/types-2#skeletonprops)

**Example**

```tsx
import { Skeleton } from '@poltura/theme-sdk/ui';

export function LoadingTitle() {
  return <Skeleton className='h-6 w-48' />;
}
```

## `Carousel` [#carousel]

A swipeable, keyboard-friendly slider; compose it with its content, items and arrows.

```ts
Carousel(props: CarouselProps): ReactNode
```

**Props:** [`CarouselProps`](/themes/sdk/reference/ui/types-2#carouselprops)

**Example**

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@poltura/theme-sdk/ui';

export function Quotes({ quotes }: { quotes: string[] }) {
  return (
    <Carousel opts={{ loop: true }}>
      <CarouselContent>
        {quotes.map((quote) => (
          <CarouselItem key={quote}>{quote}</CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}
```

## `CarouselContent` [#carouselcontent]

The track inside a [`Carousel`](/themes/sdk/reference/ui/parts-4#carousel) that holds its slides.

```ts
CarouselContent(props: CarouselContentProps): ReactNode
```

**Props:** [`CarouselContentProps`](/themes/sdk/reference/ui/types-2#carouselcontentprops)

**Example**

```tsx
import { Carousel, CarouselContent, CarouselItem } from '@poltura/theme-sdk/ui';

export function Track() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>One</CarouselItem>
        <CarouselItem>Two</CarouselItem>
      </CarouselContent>
    </Carousel>
  );
}
```

## `CarouselItem` [#carouselitem]

One slide of a [`Carousel`](/themes/sdk/reference/ui/parts-4#carousel); add a width class such as `basis-1/3` to show several at once.

```ts
CarouselItem(props: CarouselItemProps): ReactNode
```

**Props:** [`CarouselItemProps`](/themes/sdk/reference/ui/types-2#carouselitemprops)

**Example**

```tsx
import { Carousel, CarouselContent, CarouselItem } from '@poltura/theme-sdk/ui';

export function Thirds() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem className='basis-1/3'>One</CarouselItem>
      </CarouselContent>
    </Carousel>
  );
}
```

## `CarouselPrevious` [#carouselprevious]

The arrow that moves a [`Carousel`](/themes/sdk/reference/ui/parts-4#carousel) back one step.

```ts
CarouselPrevious(props: CarouselPreviousProps): ReactNode
```

**Props:** [`CarouselPreviousProps`](/themes/sdk/reference/ui/types-2#carouselpreviousprops)

**Example**

```tsx
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious } from '@poltura/theme-sdk/ui';

export function Back() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>One</CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
    </Carousel>
  );
}
```

## `CarouselNext` [#carouselnext]

The arrow that moves a [`Carousel`](/themes/sdk/reference/ui/parts-4#carousel) forward one step.

```ts
CarouselNext(props: CarouselNextProps): ReactNode
```

**Props:** [`CarouselNextProps`](/themes/sdk/reference/ui/types-2#carouselnextprops)

**Example**

```tsx
import { Carousel, CarouselContent, CarouselItem, CarouselNext } from '@poltura/theme-sdk/ui';

export function Forward() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>One</CarouselItem>
      </CarouselContent>
      <CarouselNext />
    </Carousel>
  );
}
```

## `InlineError` [#inlineerror]

A field's error message, announced to screen readers and drawn only when there is one.

```ts
InlineError(props: InlineErrorProps): ReactNode
```

**Props:** [`InlineErrorProps`](/themes/sdk/reference/ui/types-2#inlineerrorprops)

**Example**

```tsx
import { InlineError } from '@poltura/theme-sdk/ui';

export function FieldError({ error }: { error: string | null }) {
  return <InlineError message={error} className='mt-1' />;
}
```

## `Icon` [#icon]

Draws an icon setting's value as inline SVG in the current text colour.

```ts
Icon(props: IconProps): ReactNode
```

**Props:** [`IconProps`](/themes/sdk/reference/ui/types-2#iconprops)

**Example**

```tsx
import { Icon } from '@poltura/theme-sdk/ui';

export function Perk({ icon, text }: { icon: string; text: string }) {
  return (
    <p className='flex items-center gap-2'>
      <Icon value={icon} className='size-6 text-primary' />
      {text}
    </p>
  );
}
```

## `Tooltip` [#tooltip]

A hover and focus tooltip that renders only its child on the server, so it never breaks hydration.

```ts
Tooltip(props: TooltipProps): ReactNode
```

**Props:** [`TooltipProps`](/themes/sdk/reference/ui/types-2#tooltipprops)

**Example**

```tsx
import { Tooltip } from '@poltura/theme-sdk/ui';

export function Hint() {
  return (
    <Tooltip content='Includes VAT'>
      <span>Gross price</span>
    </Tooltip>
  );
}
```

## `PageLinks` [#pagelinks]

Links to the neighbouring and the first and last pages of a paged list.

```ts
PageLinks(props: PageLinksProps): ReactNode
```

**Props:** [`PageLinksProps`](/themes/sdk/reference/ui/types-2#pagelinksprops)

**Example**

```tsx
import { PageLinks } from '@poltura/theme-sdk/ui';

export function PostPages({ page, pageCount }: { page: number; pageCount: number }) {
  return <PageLinks page={page} pageCount={pageCount} href={(next) => `/blog?page=${next}`} />;
}
```