publisher-dashboard/apps/publisher-dashboard

Publisher Dashboard

A Svelte 5 SPA built with SvelteKit, Tailwind CSS v4, and shadcn-svelte.

Development

# From the monorepo root
bun run dev

# Or from this directory
bun run dev

Adding shadcn-svelte Components

This project uses shadcn-svelte for UI components.

Adding a new component

From the apps/publisher-dashboard directory, run:

bunx shadcn-svelte@latest add <component-name>

For example, to add the Button component:

bunx shadcn-svelte@latest add button

To add multiple components at once:

bunx shadcn-svelte@latest add button card input

Available components

See the full list at: https://shadcn-svelte.com/docs/components

Common components:

• button - Buttons with variants
• card - Card containers
• input - Text inputs
• label - Form labels
• select - Select dropdowns
• dialog - Modal dialogs
• dropdown-menu - Dropdown menus
• table - Data tables
• tabs - Tab navigation
• toast / sonner - Toast notifications

Using components

After adding a component, import it from $lib/components/ui:

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
</script>

<Button variant="outline">Click me</Button>

Utility function

The cn() utility for merging Tailwind classes is available at $lib/utils:

<script lang="ts">
  import { cn } from "$lib/utils";
</script>

<div class={cn("p-4", someCondition && "bg-primary")}>
  Content
</div>

Project Structure

src/
├── app.css              # Global styles + Tailwind + shadcn theme
├── app.html             # HTML template
├── lib/
│   ├── components/
│   │   └── ui/          # shadcn-svelte components go here
│   └── utils/
│       └── cn.ts        # Tailwind class merge utility
└── routes/              # SvelteKit file-based routing
    ├── +layout.svelte
    ├── +layout.ts
    └── +page.svelte