HarmonyWeb Components

Beautiful, accessible web components for modern applications

97 Components

From buttons and form controls to menus, overlays, trees and data grids — everything you need to build modern interfaces.

TypeScript First

Built with TypeScript for excellent developer experience with full type safety and IntelliSense.

Accessibility Ready

All components follow WCAG guidelines with proper ARIA attributes and keyboard navigation.

Customizable Styling

Easy theming with CSS custom properties and consistent design tokens across all components.

Getting Started

Harmony is a workspace package of the Edelweiss monorepo (@whitespaceux/harmony, not published to npm). Add it as a dependency, register the components you use and load a theme:

json

"dependencies": { "@whitespaceux/harmony": "workspace:*" }

import '@whitespaceux/harmony/themes/default.css';
import '@whitespaceux/harmony/accordion';

Quick Example

html

<hy-accordion label="Sample Accordion" expanded>
  <p>This is the accordion content that can be expanded or collapsed.</p>
</hy-accordion>

Component Categories

Actions: Button, Split Button, Icon Button, Fab, Copy Button, Toggle, Toggle Group, Menu Button, Toolbar
Forms: Text Input, Text Area, Number Input, Select, Combobox, Multi Combobox, Checkbox, Checkbox Group, Radio, Radio Group, Switch, Slider, Rating, Angle Picker, Color Picker, Color Slider, Gradient Picker, Swatch, Swatch Group, Date Field, Date Picker, Calendar, File Upload, Inline Edit, Markdown Editor
Navigation: Breadcrumb, Breadcrumb Item, Link, Tab Group, Tab, Tab Panel, Tab Nav, Tab Nav Item, Topbar, Bottombar, Sidebar, Sidebar Group, Sidebar Item, Menubar, Menubar Item, Pagination, Stepper, Step
Menus and overlays: Menu, Menu Item, Menu Item Checkbox, Menu Item Radio, Menu Group, Context Menu, Dialog, Drawer, Popover, Tooltip, Toast
Data display: Table, Datagrid, List, List Item, Tree, Tree Item, DTCG Tree, Chart, Meter, Progress, Timeline, Timeline Item, Relative Time, Carousel, Image Gallery, Image Gallery Item
Feedback and status: Alert, Badge, Chip, Empty State, Skeleton, Spinner
Layout and identity: Card, Card Media, Accordion, Divider, Splitter, Splitter Panel, Splitter Handle, Avatar, Avatar Group, Icon