Astryx Base Typeahead

Forms

About

A composable Astryx combobox engine with search, keyboard navigation, custom results, and anchored dropdown positioning.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Base Typeahead to your project and fits it to your theme.

Code

How Astryx Base Typeahead is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';;
import _inject from "@stylexjs/stylex/lib/stylex-inject";
var _inject2 = _inject;
import { useRef, useState } from 'react';
import { BaseTypeahead, createStaticSource } from '@/components/ui/astryx-base-typeahead';
import { VStack } from '@astryxdesign/core/Layout';
import { Text } from '@astryxdesign/core/Text';
import '@astryxdesign/core/theme/tokens.stylex';
const frameworks = [{
  id: 'react',
  label: 'React',
  auxiliaryData: {
    category: 'UI library'
  }
}, {
  id: 'remix',
  label: 'Remix',
  auxiliaryData: {
    category: 'Web framework'
  }
}, {
  id: 'next',
  label: 'Next.js',
  auxiliaryData: {
    category: 'Web framework'
  }
}];
const source = createStaticSource(frameworks);
_inject2({
  ltr: ".ph8yej3{width:100%}",
  priority: 4000
});
_inject2({
  ltr: ".pxc7z9f{max-width:360px}",
  priority: 4000
});
_inject2({
  ltr: ".p10xzikg{background-color:var(--color-background-surface)}",
  priority: 3000
});
_inject2({
  ltr: ".p14i3s5s{border-color:var(--color-border)}",
  priority: 2000
});
_inject2({
  ltr: ".ph6dtrn{border-radius:var(--radius-element)}",
  priority: 2000
});
_inject2({
  ltr: ".p1y0btm7{border-style:solid}",
  priority: 2000
});
_inject2({
  ltr: ".p1litavf{border-width:var(--border-width)}",
  priority: 2000
});
_inject2({
  ltr: ".p1vofgu7{padding-block:var(--spacing-1-5)}",
  priority: 2000
});
_inject2({
  ltr: ".pf314gf{padding-inline:var(--spacing-2)}",
  priority: 2000
});
_inject2({
  ltr: ".p1uczgqu{outline-color:transparent}",
  priority: 3000
});
_inject2({
  ltr: ".p6bitvs:has(input:focus-visible){outline-color:var(--focus-outline-color)}",
  priority: 3045
});
_inject2({
  ltr: ".p1eqjuhu{outline-offset:var(--focus-outline-offset)}",
  priority: 3000
});
_inject2({
  ltr: ".paatb59{outline-style:solid}",
  priority: 3000
});
_inject2({
  ltr: ".p1k57tk5{outline-width:0}",
  priority: 3000
});
_inject2({
  ltr: ".p1wtjzjv:has(input:focus-visible){outline-width:var(--focus-outline-width)}",
  priority: 3045
});
_inject2({
  ltr: ".peuugli{min-width:0}",
  priority: 4000
});
const styles = {
  root: {
    kzqmXN: "ph8yej3",
    ks0D6T: "pxc7z9f",
    $$css: true
  },
  result: {
    k7Eaqz: "peuugli",
    $$css: true
  }
};
function BaseTypeaheadCustomResults() {
  const [value, setValue] = useState(null);
  const wrapperRef = useRef(null);
  return <VStack gap={3} xstyle={styles.root}>
      <div ref={wrapperRef} className="p10xzikg p14i3s5s ph6dtrn p1y0btm7 p1litavf p1vofgu7 pf314gf p1uczgqu p6bitvs p1eqjuhu paatb59 p1k57tk5 p1wtjzjv">
        <BaseTypeahead aria-label="Search frameworks" searchSource={source} value={value} onChange={setValue} anchorRef={wrapperRef} placeholder="Search frameworks…" hasEntriesOnFocus debounceMs={0} renderItem={item => <VStack gap={0} xstyle={styles.result}>
              <Text type="label">{item.label}</Text>
              <Text type="supporting" color="secondary">
                {item.auxiliaryData?.category}
              </Text>
            </VStack>} />
      </div>
    </VStack>;
}

export default function BaseTypeaheadCustomResultsDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <BaseTypeaheadCustomResults />
    </div>
  );
}