Skip to main content

Concern

Ready-made, accessible UI components (buttons, dialogs, inputs, etc.).

Technology

shadcn/ui

Documentation​

Implementation

The desktop app is created with shadcn create using the Base UI preset (e.g. style base-nova), so all added components use @base-ui/react under the hood. frontends/desktop/components.json stores the style and aliases: the utils alias points to frontends-shared/lib/utils (the shared cn helper for class names), so shadcn-generated components import cn from the workspace package. The boilerplate adds the login-02 block (sign-in page and form at /auth/sign-in), then applies snippet-based edits to the generated form and page so they use Form/field components, sign-in methods API (GET /auth/sign-in/methods), and Google and Microsoft SSO and magic link when enabled; no icons in the SSO/email buttons. The boilerplate adds the sidebar-07 block for the dashboard at /, then overwrites app-sidebar and nav-user from skill assets and deletes nav-projects and team-switcher: the result is a collapsible sidebar (SidebarProvider, AppSidebar, SidebarInset, header with SidebarTrigger and Breadcrumb) with Logo in the header, NavMain only (no NavProjects), and NavUser with only a "Log out" control (see shadcn sidebar blocks). The root layout renders an Outlet and routes show the dashboard or sign-in page, giving a starting point for auth UI without backend auth implemented yet.

Installation

Use shadcn create with a preset URL from ui.shadcn.com/create: set Base UI as component library (and any other options), then use the generated init URL as --preset "<url>" with --template vite. Example: pnpm dlx shadcn@latest create <name> --preset "https://ui.shadcn.com/init?base=base&style=nova&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=vite&rtl=false" --template vite --src-dir -y. Then npx shadcn add will pull the correct block variant; no additional configuration needed.

Integration

ui-primitives / Base UI​

shadcn/ui is built on ui-primitives (Base UI for React). Works with styling (Tailwind).