--- title: Resources by selector description: Display resources filtered by selector values. image: https://developers.cloudflare.com/cf-twitter-card.png --- > Documentation Index > Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt > Use this file to discover all available pages before exploring further. [Skip to content](#%5Ftop) # Resources by selector The `ResourcesBySelector` component is used `37` times on `37` pages. See all examples of pages that use ResourcesBySelector Used **37** times. **Pages** * [/ai-gateway/demos/](https://developers.cloudflare.com/ai-gateway/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-gateway/demos.mdx) * [/cloudflare-for-platforms/workers-for-platforms/](https://developers.cloudflare.com/cloudflare-for-platforms/workers-for-platforms/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-for-platforms/workers-for-platforms/index.mdx) * [/containers/examples/](https://developers.cloudflare.com/containers/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/containers/examples/index.mdx) * [/d1/demos/](https://developers.cloudflare.com/d1/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/d1/demos.mdx) * [/d1/examples/](https://developers.cloudflare.com/d1/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/d1/examples/index.mdx) * [/dns/troubleshooting/](https://developers.cloudflare.com/dns/troubleshooting/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/dns/troubleshooting/index.mdx) * [/durable-objects/demos/](https://developers.cloudflare.com/durable-objects/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/durable-objects/demos.mdx) * [/durable-objects/examples/](https://developers.cloudflare.com/durable-objects/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/durable-objects/examples/index.mdx) * [/hyperdrive/demos/](https://developers.cloudflare.com/hyperdrive/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/hyperdrive/demos.mdx) * [/images/demos/](https://developers.cloudflare.com/images/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/images/demos.mdx) * [/images/examples/](https://developers.cloudflare.com/images/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/images/examples/index.mdx) * [/kv/demos/](https://developers.cloudflare.com/kv/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/kv/demos.mdx) * [/kv/examples/](https://developers.cloudflare.com/kv/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/kv/examples/index.mdx) * [/pages/demos/](https://developers.cloudflare.com/pages/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/demos.mdx) * [/pages/framework-guides/deploy-a-hono-site/](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hono-site/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx) * [/pages/framework-guides/deploy-a-nuxt-site/](https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx) * [/queues/demos/](https://developers.cloudflare.com/queues/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/queues/demos.mdx) * [/queues/examples/](https://developers.cloudflare.com/queues/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/queues/examples/index.mdx) * [/r2/demos/](https://developers.cloudflare.com/r2/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/r2/demos.mdx) * [/rules/cloud-connector/examples/](https://developers.cloudflare.com/rules/cloud-connector/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/cloud-connector/examples/index.mdx) * [/rules/compression-rules/examples/](https://developers.cloudflare.com/rules/compression-rules/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/compression-rules/examples/index.mdx) * [/rules/configuration-rules/examples/](https://developers.cloudflare.com/rules/configuration-rules/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/configuration-rules/examples/index.mdx) * [/rules/examples/](https://developers.cloudflare.com/rules/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/examples.mdx) * [/rules/origin-rules/examples/](https://developers.cloudflare.com/rules/origin-rules/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/origin-rules/examples/index.mdx) * [/rules/snippets/examples/](https://developers.cloudflare.com/rules/snippets/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/snippets/examples/index.mdx) * [/rules/transform/examples/](https://developers.cloudflare.com/rules/transform/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/transform/examples/index.mdx) * [/rules/url-forwarding/examples/](https://developers.cloudflare.com/rules/url-forwarding/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/url-forwarding/examples/index.mdx) * [/sandbox/guides/](https://developers.cloudflare.com/sandbox/guides/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/sandbox/guides/index.mdx) * [/sandbox/tutorials/](https://developers.cloudflare.com/sandbox/tutorials/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/sandbox/tutorials/index.mdx) * [/speed/troubleshooting/](https://developers.cloudflare.com/speed/troubleshooting/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/speed/troubleshooting.mdx) * [/ssl/troubleshooting/](https://developers.cloudflare.com/ssl/troubleshooting/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ssl/troubleshooting/index.mdx) * [/stream/examples/](https://developers.cloudflare.com/stream/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/stream/examples/index.mdx) * [/vectorize/demos/](https://developers.cloudflare.com/vectorize/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/vectorize/demos.mdx) * [/workers-ai/guides/demos-architectures/](https://developers.cloudflare.com/workers-ai/guides/demos-architectures/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/guides/demos-architectures.mdx) * [/workers/demos/](https://developers.cloudflare.com/workers/demos/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/demos.mdx) * [/workers/examples/](https://developers.cloudflare.com/workers/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/examples/index.mdx) * [/workflows/examples/](https://developers.cloudflare.com/workflows/examples/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workflows/examples/index.mdx) **Partials** The `ResourcesBySelector` component allows you to pull in documentation resources based on the `pcx_content_type`, `tags` and `products` frontmatter properties. ## Component Filter resources... [Single Page App (SPA) shell with bootstrap dataUse HTMLRewriter to inject prefetched bootstrap data into an SPA shell, eliminating client-side data fetching on initial load. Works with Workers Static Assets or an externally hosted SPA.](https://developers.cloudflare.com/workers/examples/spa-shell/)[Write to Analytics EngineWrite custom analytics events to Workers Analytics Engine for high-cardinality, time-series data.](https://developers.cloudflare.com/workers/examples/analytics-engine/)[Stream large JSONParse and transform large JSON request and response bodies using streaming.](https://developers.cloudflare.com/workers/examples/streaming-json/)[HTTP Basic AuthenticationShows how to restrict access using the HTTP Basic schema.](https://developers.cloudflare.com/workers/examples/basic-auth/)[Fetch HTMLSend a request to a remote server, read HTML from the response, and serve that HTML.](https://developers.cloudflare.com/workers/examples/fetch-html/)[Return small HTML pageDeliver an HTML page from an HTML string directly inside the Worker script.](https://developers.cloudflare.com/workers/examples/return-html/)[Return JSONReturn JSON directly from a Worker script, useful for building APIs and middleware.](https://developers.cloudflare.com/workers/examples/return-json/)[Sign requestsVerify a signed request using the HMAC and SHA-256 algorithms or return a 403.](https://developers.cloudflare.com/workers/examples/signing-requests/)[Stream OpenAI API ResponsesUse the OpenAI v4 SDK to stream responses from OpenAI.](https://developers.cloudflare.com/workers/examples/openai-sdk-streaming/)[Using timingSafeEqualProtect against timing attacks by safely comparing values using timingSafeEqual.](https://developers.cloudflare.com/workers/examples/protect-against-timing-attacks/)[Turnstile with WorkersInject Turnstile implicitly into HTML elements using the HTMLRewriter runtime API.](https://developers.cloudflare.com/workers/examples/turnstile-html-rewriter/)[Custom Domain with ImagesSet up custom domain for Images using a Worker or serve images using a prefix path and Cloudflare registered domain.](https://developers.cloudflare.com/workers/examples/images-workers/)[103 Early HintsAllow a client to request static assets while waiting for the HTML response.](https://developers.cloudflare.com/workers/examples/103-early-hints/)[Cache Tags using WorkersSend Additional Cache Tags using Workers](https://developers.cloudflare.com/workers/examples/cache-tags/)[Accessing the Cloudflare ObjectAccess custom Cloudflare properties and control how Cloudflare features are applied to every request.](https://developers.cloudflare.com/workers/examples/accessing-the-cloudflare-object/)[Aggregate requestsSend two GET request to two urls and aggregates the responses into one response.](https://developers.cloudflare.com/workers/examples/aggregate-requests/)[Block on TLSInspects the incoming request's TLS version and blocks if under TLSv1.2.](https://developers.cloudflare.com/workers/examples/block-on-tls/)[Bulk redirectsRedirect requests to certain URLs based on a mapped object to the request's URL.](https://developers.cloudflare.com/workers/examples/bulk-redirects/)[Cache POST requestsCache POST requests using the Cache API.](https://developers.cloudflare.com/workers/examples/cache-post-request/)[Conditional responseReturn a response based on the incoming request's URL, HTTP method, User Agent, IP address, ASN or device type.](https://developers.cloudflare.com/workers/examples/conditional-response/)[Cookie parsingGiven the cookie name, get the value of a cookie. You can also use cookies for A/B testing.](https://developers.cloudflare.com/workers/examples/extract-cookie-value/)[Fetch JSONSend a GET request and read in JSON from the response. Use to fetch external data.](https://developers.cloudflare.com/workers/examples/fetch-json/)[Geolocation: Custom StylingPersonalize website styling based on localized user time.](https://developers.cloudflare.com/workers/examples/geolocation-custom-styling/)[Geolocation: Hello WorldGet all geolocation data fields and display them in HTML.](https://developers.cloudflare.com/workers/examples/geolocation-hello-world/)[Post JSONSend a POST request with JSON data. Use to share data with external servers.](https://developers.cloudflare.com/workers/examples/post-json/)[RedirectRedirect requests from one URL to another or from one set of URLs to another set.](https://developers.cloudflare.com/workers/examples/redirect/)[Rewrite linksRewrite URL links in HTML using the HTMLRewriter. This is useful for JAMstack websites.](https://developers.cloudflare.com/workers/examples/rewrite-links/)[Set security headersSet common security headers (X-XSS-Protection, X-Frame-Options, X-Content-Type-Options, Permissions-Policy, Referrer-Policy, Strict-Transport-Security, Content-Security-Policy).](https://developers.cloudflare.com/workers/examples/security-headers/)[Multiple Cron TriggersSet multiple Cron Triggers on three different schedules.](https://developers.cloudflare.com/workers/examples/multiple-cron-triggers/)[Setting Cron TriggersSet a Cron Trigger for your Worker.](https://developers.cloudflare.com/workers/examples/cron-trigger/)[Using the WebSockets APIUse the WebSockets API to communicate in real time with your Cloudflare Workers.](https://developers.cloudflare.com/workers/examples/websockets/)[Geolocation: Weather applicationFetch weather data from an API using the user's geolocation data.](https://developers.cloudflare.com/workers/examples/geolocation-app-weather/)[A/B testing with same-URL direct accessSet up an A/B test by controlling what response is served based on cookies. This version supports passing the request through to test and control on the origin, bypassing random assignment.](https://developers.cloudflare.com/workers/examples/ab-testing/)[Alter headersExample of how to add, change, or delete headers sent in a request or returned in a response.](https://developers.cloudflare.com/workers/examples/alter-headers/)[Auth with headersAllow or deny a request based on a known pre-shared key in a header. This is not meant to replace the WebCrypto API.](https://developers.cloudflare.com/workers/examples/auth-with-headers/)[Bulk origin overrideResolve requests to your domain to a set of proxy third-party origin URLs.](https://developers.cloudflare.com/workers/examples/bulk-origin-proxy/)[Using the Cache APIUse the Cache API to store responses in Cloudflare's cache.](https://developers.cloudflare.com/workers/examples/cache-api/)[Cache using fetchDetermine how to cache a resource by setting TTLs, custom cache keys, and cache headers in a fetch request.](https://developers.cloudflare.com/workers/examples/cache-using-fetch/)[CORS header proxyAdd the necessary CORS headers to a third party API response.](https://developers.cloudflare.com/workers/examples/cors-header-proxy/)[Country code redirectRedirect a response based on the country code in the header of a visitor.](https://developers.cloudflare.com/workers/examples/country-code-redirect/)[Data loss preventionProtect sensitive data to prevent data loss, and send alerts to a webhooks server in the event of a data breach.](https://developers.cloudflare.com/workers/examples/data-loss-prevention/)[Debugging logsSend debugging information in an errored response to a logging service.](https://developers.cloudflare.com/workers/examples/debugging-logs/)[Hot-link protectionBlock other websites from linking to your content. This is useful for protecting images.](https://developers.cloudflare.com/workers/examples/hot-link-protection/)[Logging headers to consoleExamine the contents of a Headers object by logging to console with a Map.](https://developers.cloudflare.com/workers/examples/logging-headers/)[Modify request propertyCreate a modified request with edited properties based off of an incoming request.](https://developers.cloudflare.com/workers/examples/modify-request-property/)[Modify responseFetch and modify response properties which are immutable by creating a copy first.](https://developers.cloudflare.com/workers/examples/modify-response/)[Read POSTServe an HTML form, then read POST requests. Use also to read JSON or POST data from an incoming request.](https://developers.cloudflare.com/workers/examples/read-post/)[Respond with another siteRespond to the Worker request with the response from another website (example.com in this example).](https://developers.cloudflare.com/workers/examples/respond-with-another-site/) ``` import { ResourcesBySelector } from "~/components"; ``` ### Inputs * `directory` ` string ` The directory to search for resources in, relative to `src/content/docs/`. For example, for Workers tutorials, `directory="workers/tutorials/"`. * `filterables` ` string[] ` An array of frontmatter properties to show in the frontend filter dropdown. For example, `filterables={["tags"]}` will allow users to filter based on each pages' `tags` frontmatter. * `types` ` string[] ` An array of `pcx_content_type` values to filter which content gets pulled into the component. For example, `types={["example"]}`. * `tags` ` string[] ` optional An array of `tags` values to filter which content gets pulled into the component. For example, `tags={["AI"]}`. To see a list of the available tags, and which pages are associated with them, refer to [this list](https://developers.cloudflare.com/style-guide/frontmatter/tags/). * `products` ` string[] ` optional An array of `products` values to filter which content gets pulled into the component. For example, `products={["D1"]}`. * `showDescriptions` ` boolean ` optional (default true) If set to `false`, will only show the titles of associated pages, not the showDescriptions * `showLastUpdated` ` boolean ` optional (default false) If set to `true`, will add the last updated date, which is added in the [updated frontmatter value](https://developers.cloudflare.com/style-guide/frontmatter/custom-properties/#properties). ```json {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/components/","name":"Components"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/components/resources-by-selector/","name":"Resources by selector"}}]} ```