Desktop components
Components designed for pointer-driven interfaces. Hover states, compact sizing, and interaction patterns following macOS conventions. For the visual language they build on, see Foundations.
Get the desktop bundle
The desktop bundle ships the foundations (colors, typography, materials, layout, shadows, dark mode) plus every component on this page. Nothing mobile-only, so it stays smaller than the full build.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codedgar/puppertino@2.0.0/dist/css/puppertino-desktop.min.css">Installing through npm? Import the same bundle by name.
import '@codedgar/puppertino/desktop'Building for both platforms, or unsure what you need? Use the full bundle, puppertino.min.css, which includes everything. See Getting started for all the install options, including per-component imports.
Menus, popovers, sliders, color wells, date pickers, and the dock are interactive. Each component page documents the small vanilla JavaScript helper it needs; the CSS works without any of them.
Components
Controls & input
The controls that collect decisions: press, type, pick, and adjust.
Menus & overlays
Surfaces that appear above the page: menus, popovers, dialogs, and alerts.
App structure
The chrome of a macOS-style app: windows, sidebars, toolbars, and the menu bar and dock.
Content & status
Presenting data and communicating what the app is doing.