Developers
Start building
Themes/Theme SDK/Modules/ui/Parts: PopoverContent to PageLinks

Parts: PopoverContent to PageLinks

The parts of @poltura/theme-sdk/ui, PopoverContent to PageLinks.

On this page
import { … } from '@poltura/theme-sdk/ui';

PopoverContent

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

PopoverContent(props: PopoverContentProps): ReactNode

Props: PopoverContentProps

Example

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

A thin line that divides content.

Separator(props: SeparatorProps): ReactNode

Props: SeparatorProps

Example

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

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

Skeleton

A pulsing placeholder block shown while content loads.

Skeleton(props: SkeletonProps): ReactNode

Props: SkeletonProps

Example

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

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

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

Carousel(props: CarouselProps): ReactNode

Props: CarouselProps

Example

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

The track inside a Carousel that holds its slides.

CarouselContent(props: CarouselContentProps): ReactNode

Props: CarouselContentProps

Example

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

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

CarouselItem

One slide of a Carousel; add a width class such as basis-1/3 to show several at once.

CarouselItem(props: CarouselItemProps): ReactNode

Props: CarouselItemProps

Example

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

The arrow that moves a Carousel back one step.

CarouselPrevious(props: CarouselPreviousProps): ReactNode

Props: CarouselPreviousProps

Example

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

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

CarouselNext

The arrow that moves a Carousel forward one step.

CarouselNext(props: CarouselNextProps): ReactNode

Props: CarouselNextProps

Example

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

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

InlineError

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

InlineError(props: InlineErrorProps): ReactNode

Props: InlineErrorProps

Example

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

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

Icon

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

Icon(props: IconProps): ReactNode

Props: IconProps

Example

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

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

Tooltip(props: TooltipProps): ReactNode

Props: TooltipProps

Example

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

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

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

PageLinks(props: PageLinksProps): ReactNode

Props: PageLinksProps

Example

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}`} />;
}
Last updated