# Custom Views and Components (/docs/admin/custom-views)
---
title: Custom Views and Components
description: Every admin screen is resolved by name. Declare a name on the server, put a React file under that name beside the admin, and your screen mounts where the generated one was.
kind: guide
package: "@questpie/admin"
---
The generated list and form fit most tables. Some do not. A board of cards, a
wizard, a screen that is not a collection at all. You write those, and the
admin mounts them like its own.
## Two files, one name
An extension is a pair, or client only. The server file declares the name. The
client file supplies the React. Codegen matches the two.
```bash
questpie add view board
# src/questpie/server/views/board.ts the name and the kind
# src/questpie/admin/views/board.tsx the component
```
| Server file | Client file | What it is |
| ------------------------ | ------------------------ | -------------------------------- |
| `server/views/*.ts` | `admin/views/*.tsx` | A list or form screen |
| `server/components/*.ts` | `admin/components/*.tsx` | A component you name from config |
| `server/blocks/*.ts` | `admin/blocks/*.tsx` | A block for the block editor |
| none | `admin/pages/*.tsx` | A screen at its own URL |
| none | `admin/widgets/*.tsx` | A tile on the dashboard |
Both roots sit under `src/questpie/`. A fresh app has none of these directories.
## A board instead of a table
Declare the view. `kind` decides which route serves it.
```ts title="src/questpie/server/views/board.ts"
import { view } from "@questpie/admin/factories";
export const boardView = view("board", { kind: "list" });
```
Point a collection at it. `v` carries one method per registered list view.
```ts title="src/questpie/server/collections/tasks.ts"
import { collection } from "#questpie/factories";
export const tasks = collection("tasks")
.fields(({ f }) => ({
title: f.text(160).label("Title").required(),
status: f
.select([
{ value: "todo", label: "To do" },
{ value: "doing", label: "Doing" },
{ value: "done", label: "Done" },
])
.label("Status")
.default("todo"),
}))
.title(({ f }) => f.title)
.list(({ v, f }) =>
v.board({
columns: [f.title, f.status],
grouping: { fields: [f.status], defaultField: f.status },
}),
);
```
Now the renderer. It reads the same config back off `viewConfig`.
```tsx title="src/questpie/admin/views/board.tsx"
import {
AdminViewHeader,
AdminViewLayout,
type CollectionListViewProps,
useCollectionList,
view,
} from "@questpie/admin/client";
function BoardView({ collection, viewConfig }: CollectionListViewProps) {
const groupBy = viewConfig?.grouping?.defaultField ?? "status";
const { data } = useCollectionList(collection, { limit: 100 });
const docs: any[] = data?.docs ?? [];
const lanes = [...new Set(docs.map((doc) => String(doc[groupBy])))];
return (
}>
{lanes.map((lane) => (
{lane}
{docs
.filter((doc) => String(doc[groupBy]) === lane)
.map((doc) => (
{doc._title}
))}
))}