Page templates

Pre-built patterns for the most common page types.

Table page

For CRUD lists, search and filters.

// Structure
<div className="flex flex-col gap-5 p-5">
  <header> // Title + <Button> New
  <div> // <Input> search + <Select> filters
  <Table> // Rounded border baked in
  <Pagination> // Or page-size <Select>
</div>

Dashboard page

For overview, metrics, and charts.

// Structure
<div className="flex flex-col gap-5 p-5">
  <header> // Title + <Select> date filter
  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <Card> // Metric — value + trend <Badge>
  </div>
  <div className="grid gap-4 lg:grid-cols-2">
    <Card> // Chart — title + body
  </div>
</div>

Form page

For create/edit flows with grouped sections.

// Structure
<div className="flex flex-col gap-5 p-5 max-w-3xl">
  <header> // Title
  <form>
    <Card> // Section — <Label> + <Input> grid
    <Card> // Another section
    <div className="flex justify-end gap-3">
      <Button variant="outline">Cancel</Button>
      <Button>Save</Button>
    </div>
  </form>
</div>

Detail page

For viewing an entity with tabs.

// Structure
<div className="flex flex-col gap-5 p-5">
  <nav> // Breadcrumb
  <header> // Title + <Badge> + <Button> actions
  <Tabs>
    <TabsList variant="line"> // Tab navigation
    <TabsContent> // <Card>s with info
  </Tabs>
</div>