> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# User Interface Components

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[localhost link]: http://localhost:3000/docs/4/app-studio/concepts/overview/ui-components

[old doc.lw link]: https//doc.lucidworks.com/app-studio/4.2/3114

[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/concepts/overview/ui-components

Appkit has distilled years of research, design, and usability testing into a library of configurable user interface components responsively designed for both desktop and mobile.

<LwTemplate />

These include support for:

* **Faceted navigation.** All common interaction modes, including text links and checkboxes, lists and hierarchies.
* **Advanced search.** Advanced search form components that utilize various matching strategies for deeper searching.
* **Suggestions.** As-you-type suggestions driven by a static list of terms, based on a field in the index, or powered by the platform.
* **Data visualizations.** From simple bar charts, to pie charts, to sophisticated area and line graphs for search-driven BI.
* **Geospatial mapping.** Plot search results on interactive maps from any provider, such as Google or Bing.
* **Search controls.** All the essentials you would expect: sorting, pagination, results per page, breadcrumbs, tabs.
* **Topic pages.** Search-driven topic pages using human, readable, "pretty" URLs, such as: mywebsite.com/companies/amazon/.

The Appkit framework removes the need for low-level code when developing search applications. Everything from establishing a connection to the search platform through to rendering results and facets can be granularly controlled via simple markup alongside regular HTML. Applications built using Appkit are **mobile-optimized** through responsive design and will correctly adapt to tablet and mobile sized devices.

In general, there is no must create a separate site for a mobile view, although that is also supported. Appkit provides an optimized experience for modern browsers (using HTML5 document types) but degrades gracefully and is functional back to IE11.

Applications can be fully **localized** (Java I18N), and our media module lets you normalize image size and resolution, on-the-fly in an efficient (cacheable) manner.