# Developer tool landing

> An API platform landing page: terminal hero, code sample, features grid, plan comparison and changelog.

Template · Pro · https://lodeui.com/templates/devtool-landing

## When to use

- SDKs, APIs, infrastructure and developer tools.

## When not to use

- Consumer apps.

## Installation

```bash
npx shadcn@latest add @lode/devtool-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { DevtoolLanding } from "@/components/templates/devtool-landing";

export default function Page() {
  return <DevtoolLanding />;
}
```

Built from: Changelog, Code viewer, CTA section, Footer section, Grid pattern, Hero section, Logo cloud, Pricing comparison, Terminal

## API reference

### DevtoolLanding

A complete API platform landing page: typing terminal hero, a highlighted code sample on a grid, features, plan comparison, changelog, CTA and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through header, code tabs, plans and changelog filters |

## Accessibility

- Terminal output is a live log readable by screen readers; code is real selectable text.

## Motion

- The terminal types the install; grid cells glow behind the code; feature cells fade in.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Replace CODE with your real quickstart snippet.

## Related

- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [Pricing comparison](https://lodeui.com/blocks/pricing-comparison) — Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.
- [Changelog](https://lodeui.com/blocks/changelog) — Release notes timeline with type filters, cover art and subscribe.