# Parts: FilterOption to ProductCardSkeleton (/themes/sdk/reference/listing/parts-1)

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

## `FilterOption` [#filteroption]

One checkbox choice with its match count, and a disclosure for its nested choices such as subcategories.

```ts
FilterOption(props: FilterOptionProps): ReactElement
```

**Props:** [`FilterOptionProps`](/themes/sdk/reference/listing/types-2#filteroptionprops)

**Example**

```tsx
import { FilterOption, useListingFilters } from '@poltura/theme-sdk/listing';

export function BrandChoices() {
  const filters = useListingFilters();
  const brand = filters.groups.find((group) => group.id === 'brand');
  if (!brand) return null;
  return brand.options.map((option) => (
    <FilterOption key={option.id} groupId={brand.id} option={option} onToggle={(id) => filters.toggle(brand.id, id)} />
  ));
}
```

## `SwatchFilter` [#swatchfilter]

A swatch group's choices as colour or picture dots with their names, with search and "show more" for long lists.

```ts
SwatchFilter(props: SwatchFilterProps): ReactElement
```

**Props:** [`SwatchFilterProps`](/themes/sdk/reference/listing/types-2#swatchfilterprops)

**Example**

```tsx
import { SwatchFilter, useListingFilters } from '@poltura/theme-sdk/listing';

export function ColourFilter() {
  const filters = useListingFilters();
  const colour = filters.groups.find((group) => group.kind === 'swatch');
  return colour ? <SwatchFilter group={colour} onToggle={(id) => filters.toggle(colour.id, id)} /> : null;
}
```

## `PriceRangeFilter` [#pricerangefilter]

A price group's range as a slider, two amount fields or both, as the merchant chose, with a reset.

```ts
PriceRangeFilter(props: PriceRangeFilterProps): ReactElement | null
```

**Props:** [`PriceRangeFilterProps`](/themes/sdk/reference/listing/types-2#pricerangefilterprops)

**Example**

```tsx
import { PriceRangeFilter, useListingFilters } from '@poltura/theme-sdk/listing';

export function PriceFilter() {
  const filters = useListingFilters();
  const price = filters.groups.find((group) => group.kind === 'price');
  return price ? <PriceRangeFilter group={price} onChange={filters.setPriceRange} /> : null;
}
```

## `FilterGroup` [#filtergroup]

One filter group as a collapsible section: its title and selection count, then its checklist, swatches, price range or toggle.

```ts
FilterGroup(props: FilterGroupProps): ReactElement
```

**Props:** [`FilterGroupProps`](/themes/sdk/reference/listing/types-2#filtergroupprops)

**Example**

```tsx
import { FilterGroup, useListingFilters } from '@poltura/theme-sdk/listing';

export function FilterList() {
  const filters = useListingFilters();
  return filters.groups.map((group) => (
    <FilterGroup
      key={group.id}
      group={group}
      onToggle={(optionId) => filters.toggle(group.id, optionId)}
      onPriceChange={filters.setPriceRange}
    />
  ));
}
```

## `AppliedFilters` [#appliedfilters]

The applied filters as removable chips, with a "clear all" link; nothing while no filter is applied.

```ts
AppliedFilters(props: AppliedFiltersProps): ReactElement | null
```

**Props:** [`AppliedFiltersProps`](/themes/sdk/reference/listing/types-2#appliedfiltersprops)

**Example**

```tsx
import { AppliedFilters, useListingFilters } from '@poltura/theme-sdk/listing';

export function FilterChips() {
  const filters = useListingFilters();
  return <AppliedFilters filters={filters.applied} onClear={() => filters.clear()} />;
}
```

## `FilterSheet` [#filtersheet]

The narrow-screen filters: a button with the selected count that opens [`FilterPanel`](/themes/sdk/reference/listing/defaults-1#filterpanel) in a sheet with "clear all" and "show results".

```ts
FilterSheet(props: FilterSheetProps): ReactElement
```

**Props:** [`FilterSheetProps`](/themes/sdk/reference/listing/types-2#filtersheetprops)

**Example**

```tsx
import { FilterSheet, useListing } from '@poltura/theme-sdk/listing';

export function MobileFilters() {
  const { pagination } = useListing();
  return <FilterSheet resultCount={pagination.total} className="xl:hidden" />;
}
```

**See also:** [`FilterPanel`](/themes/sdk/reference/listing/defaults-1#filterpanel), [`useListingFilters`](/themes/sdk/reference/listing/hooks#uselistingfilters)

## `SortSelect` [#sortselect]

The sort menu: a button naming the current order that opens the list of orders.

```ts
SortSelect(props: SortSelectProps): ReactElement | null
```

**Props:** [`SortSelectProps`](/themes/sdk/reference/listing/types-2#sortselectprops)

**Example**

```tsx
import { SortSelect, type SortOption } from '@poltura/theme-sdk/listing';
import { useState } from 'react';

const orders: SortOption[] = [
  { value: 'popularity', label: 'Most popular' },
  { value: 'priceAsc', label: 'Price, low to high' },
];

export function ListingSort() {
  const [sort, setSort] = useState(orders[0].value);
  return <SortSelect options={orders} selected={sort} onChange={setSort} />;
}
```

## `ListingPagination` [#listingpagination]

Previous and next buttons around the first, last and nearby page numbers; nothing for a single page.

```ts
ListingPagination(props: ListingPaginationProps): ReactElement | null
```

**Props:** [`ListingPaginationProps`](/themes/sdk/reference/listing/types-2#listingpaginationprops)

**Example**

```tsx
import { ListingPagination, type Pagination } from '@poltura/theme-sdk/listing';

export function Pages({ pagination, open }: { pagination: Pagination; open(page: number): void }) {
  return <ListingPagination pagination={pagination} onPageChange={open} />;
}
```

## `ProductCardSkeleton` [#productcardskeleton]

A grey placeholder in the shape of a product card, for lists that are still loading.

```ts
ProductCardSkeleton(props: ProductCardSkeletonProps): ReactElement
```

**Props:** [`ProductCardSkeletonProps`](/themes/sdk/reference/listing/types-2#productcardskeletonprops)

**Example**

```tsx
import { ProductCardSkeleton } from '@poltura/theme-sdk/listing';

export function LoadingRow() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {[0, 1, 2, 3].map((index) => <ProductCardSkeleton key={index} />)}
    </div>
  );
}
```