# Install + first grid
Install @pretable/react and render your first three-column grid in five minutes.
This guide installs `@pretable/react` and renders a three-column, five-row grid.
`npm i @pretable/react @pretable/ui` — the `react` package is the engine, `ui` ships the themes.
Pick a theme and import its CSS plus the grid skin once at your app's entry point:
```css
@import "@pretable/ui/themes/excel.css";
@import "@pretable/ui/grid.css";
```
The theme file declares all `--pretable-*` tokens at `:root`; `grid.css` is the selector-based skin that targets the engine's `[data-pretable-*]` data attributes. Two themes ship today — `excel.css` (gray, dense, technical, light-only) and `material.css` (Material 3 light + dark; toggle dark mode by setting `data-theme="dark"` on ``). If you only need the engine, skip both imports and the grid renders unstyled (functional but no visual chrome).
```tsx
import {
Pretable,
type PretableColumn,
type PretableRow,
} from "@pretable/react";
const columns: Array = [
{ id: "name", header: "Name", value: (r) => r.name },
{ id: "role", header: "Role", value: (r) => r.role },
{ id: "city", header: "City", value: (r) => r.city },
];
const rows: Array = [
{ id: "1", name: "Ada", role: "Engineer", city: "London" },
{ id: "2", name: "Grace", role: "Admiral", city: "New York" },
{ id: "3", name: "Linus", role: "Maintainer", city: "Helsinki" },
{ id: "4", name: "Margaret", role: "Director", city: "Boston" },
{ id: "5", name: "Tim", role: "Inventor", city: "London" },
];
export function People() {
return ;
}
```
Tailwind v4 users can additionally import `@pretable/ui/tailwind.css` to get `bg-pt-*`/`text-pt-*` utility shortcuts that alias the `--pretable-*` tokens. Density (compact / standard / spacious) is runtime-switchable by toggling `data-density="..."` on ``.
That's the full surface for a static grid. Sort, filter, selection, and streaming rows are layered on top — see [/docs/streaming](/docs/streaming) for the streaming-adapter API while a guide for the rest is being written.
## What's next
API reference and recipes are in flight. For now, browse the [public exports](https://github.com/cacheplane/pretable/blob/main/packages/react/src/index.ts) and [/docs/streaming](/docs/streaming) for the streaming-adapter API.