2. Add a page

Start in the minimal app from the quickstart. A plugin groups the files for one feature. Start with just a page; add behavior only when you need it. We will grow one plugin called counter throughout these lessons.

Read more about plugin files →

1. Create one fileCopy Anchor Link

Create src/plugins/counter/ui/pages/index.tsx:

'use client';
import { PageHeader } from '@bitakit/ui/components';

export default function CounterPage() {
  return <PageHeader title="Counter" />;
}

2. Open the pageCopy Anchor Link

With the dev server running, visit /counter. You should see the Counter heading. If you create files while the server is stopped, npm run typecheck generates their types before checking them.

That single file is a plugin. Its folder supplies the name; discovery connects its page.

src/plugins/counter/
└── ui/pages/index.tsx   → /counter

3. Understand the namesCopy Anchor Link

Only create the files the feature needs. A plugin.config.ts, service, Action, event or slot is not required to show this page.

What you have nowCopy Anchor Link

• This step gave you the plugin counter (its folder) and the page /counter, served by the adapter's catch-all route. Nothing was registered by hand.
• Others extend it by linking to the page, for example with an Action whose href is /counter in their own folder.

Next: Give the Counter a value →

Later: scaffold a larger featureCopy Anchor Link

npx bitakit add plugin notes --example creates a fuller example with a service, events, Actions and a page. It is useful once those concepts are familiar. For the learning path, continue growing the Counter one file at a time.

For explicit dependencies or a reusable package, see the service reference and package guide.