Function Installation

src/docs/Installation.jsx:129–172

()

);

const Installation = () => {
  const [selectedMethod, setSelectedMethod] = useState('manual');

  useScrollToTop();

  return (
    <section className="docs-section">
      <h3 className="docs-category-title">Installation</h3>

      <p className="docs-paragraph dim">Using components is very straightforward, anyone can do it.</p>

      <hr className="docs-separator" />

      <h3 className="docs-category-title">Pick The Method</h3>

      <p className="docs-paragraph">
        You can keep it simple and copy code directly from the documentation, or you can use CLI commands to install
        components into your project.
      </p>

      <p className="docs-paragraph dim">Click the cards below to change your preferred method.</p>

      <MethodSelector methods={METHODS} selected={selectedMethod} onSelect={setSelectedMethod} />

      <h3 className="docs-category-title">Steps</h3>

      {selectedMethod === 'manual' ? <ManualSteps /> : <CliSteps />}

      <hr className="docs-separator" />

      <h4 className="docs-category-subtitle">That&apos;s all!</h4>

      <p className="docs-paragraph">
        From here on, it&apos;s all about how you integrate the component into your project. The code is yours to play
        around with - modify styling, functionalities, anything goes!
      </p>

      <DocsButtonBar
        next={{ label: 'MCP Server', route: '/get-started/mcp' }}
        previous={{ label: 'Introduction', route: '/get-started/introduction' }}
      />
    </section>
  );
};

export default Installation;