Public Good Design System
Public Good Design System: how to create your own design system with components and Svelte, React, Vue, Blazor, etc.
Public Good Design System
Public Good Design System is a free open source design system that anyone can use and improve.
This is brand new work and we welcome collaboration, and guidance, and feedback.
Contact joel@joelparkerhenderson.com
Examples
Batteries-included web examples for Svelte, React, Vue, Blazor:
Headless versions if you want to use componets with all your own styles:
Components
- accordion-nav: a navigation container for collapsible accordion information
- accordion-nav-list: an ordered list of accordion nav list item components
- accordion-nav-list-item: one accordion nav list item component
- action-link: a hyperlink styled as an action trigger
- alert-dialog: a modal dialog for urgent messages requiring user acknowledgment
- alert: a status message for important information or feedback
- angle-slider-range-input: a range input for selecting an angle in degrees
- aspect-ratio-container: a container that maintains a fixed aspect ratio
- avatar: an avatar indicator that shows an avatar image or avatar text
- avatar-image: an avatar indicator inside image such as a user photo
- avatar-text: an avatar indicator inner text such as a user name
- back-link: a navigation link to return to a previous page
- badge: a small label for counts, statuses, or categories
- banner: a prominent message bar across the top of a page
- beach-ball: a decorative animated beach ball element
- breadcrumb-nav: a navigation container for breadcrumb trail links
- breadcrumb-nav-list: an ordered list of breadcrumb navigation items
- breadcrumb-nav-list-item: one breadcrumb navigation link in the trail
- button: a generic clickable button element
- button-input: an input element of type button for form actions
- calendar-table: a calendar table interactive grid for managing dates, days, etc.
- calendar-table-head: a calendar table interactive grid thead for managing dates, days, etc.
- calendar-table-body: a calendar table interactive grid tbody for managing dates, days, etc.
- calendar-table-foot: a calendar table interactive grid tfoot for managing dates, days, etc.
- calendar-table-col: a calendar table interactive grid column for managing dates, days, etc.
- calendar-table-row: a calendar table interactive grid row for managing dates, days, etc.
- calendar-table-data: a calendar table interactive grid data cell for managing dates, days, etc.
- calendar-range-picker: a picker for selecting a date range on a calendar
- call-to-action: a prominent prompt encouraging user action
- caption: a caption for a table or figure element
- card: a grouped content container with header, body, and footer areas
- care-card: a medical care instruction card with urgency levels
- carousel: a slideshow for cycling through content items
- character-counter: a counter showing remaining or used characters in a text field
- character: a single character display element
- checkbox-input: a checkbox input for toggling a boolean value
- check-list: an ordered list of check list item components
- check-list-item: one check list item component with a checkbox
- clipboard-copy-button: a button that copies text to the clipboard
- collapsible: a container that can be expanded or collapsed
- color-input: an input for selecting a color value
- color-picker: a two-dimensional board for picking colors by hue and saturation
- color-picker-button: a button showing a color swatch in a color picker
- combobox: a text input combined with a dropdown list for filtering options
- command: a command palette for searching and executing actions
- contents-nav: a navigation landmark for a table of contents
- contents-list: an ordered list of contents list item components
- contents-list-item: one contents list item component linking to a page section
- context-menu: a menu that appears on right-click or long-press
- context-menu-item: one item in a context menu
- data-filter-form: a form for filtering data by criteria
- data-table: a data table interactive grid for displaying and sorting tabular data
- data-table-head: a data table interactive grid thead for displaying and sorting tabular data
- data-table-body: a data table interactive grid tbody for displaying and sorting tabular data
- data-table-foot: a data table interactive grid tfoot for displaying and sorting tabular data
- data-table-col: a data table interactive grid column for displaying and sorting tabular data
- data-table-row: a data table interactive grid row for displaying and sorting tabular data
- data-table-data: a data table interactive grid data cell for displaying and sorting tabular data
- date-field: a structured field for entering date components
- date-input: an input for entering a date value
- date-range: a display of a start and end date range
- datetime-local-input: an input for entering a date and time without time zone
- details: a disclosure widget that shows and hides content
- dial: a rotary dial control for selecting a value
- dialog: a modal or non-modal dialog window
- do-list: a guideline list of encouraged do-list-item components
- do-list-item: an encouraged-practice item in a do-list guideline list
- dont-list: a guideline list of discouraged dont-list-item components
- dont-list-item: a discouraged-practice item in a dont-list guideline list
- drawer: a panel that slides in from the edge of the screen
- dropdown-menu: a menu that opens below a trigger button
- editable-form: a form wrapper for inline editing of content
- editable: an inline-editable text element that toggles between view and edit modes
- email-link: a mailto hyperlink for an email address
- email-input: an input for entering an email address
- emoji-character-picker: a picker for browsing and selecting emoji characters
- emoji: a single emoji character with accessible name
- error-message: an error message associated with a form field
- error-summary: a summary of all validation errors on a form
- expander: a control that expands to reveal more content
- field: a form field wrapper with label, input, and error message
- fieldset: a group of related form fields with a legend
- figure: a self-contained figure with optional caption
- file-dialog: a dialog for browsing and selecting files
- file-input: an input for selecting files from the file system
- file-manager: a file browser for navigating and managing files
- file-upload: a drag-and-drop area for uploading files
- five-face-rating-view: a read-only display of a five-face satisfaction rating
- five-face-rating-picker: a picker for selecting a 1-5 satisfaction rating using face labels
- five-face-rating-picker-button: a picker button for selecting a 1-5 satisfaction rating using face labels
- five-star-rating-view: a read-only display of a five-star rating
- five-star-rating-picker: a picker for selecting a 1-5 star rating using radio buttons
- five-star-rating-picker-button: a picker button for selecting a 1-5 star rating using radio buttons
- flair: a decorative highlight or emphasis element
- floating-panel: a panel that floats above page content
- footer: a page or section footer area
- footnote: a footnote reference and content element
- form: a form element for collecting and submitting user data
- gantt-table: a Gantt chart table interactive grid for planning schedule visualization
- gantt-table-head: a Gantt chart table interactive grid thead for planning schedule visualization
- gantt-table-body: a Gantt chart table interactive grid tbody for planning schedule visualization
- gantt-table-foot: a Gantt chart table interactive grid tfoot for planning schedule visualization
- gantt-table-col: a Gantt chart table interactive grid column for planning schedule visualization
- gantt-table-row: a Gantt chart table interactive grid row for interactive grid planning schedule visualization
- gantt-table-data: a Gantt chart table interactive grid data cell for planning schedule visualization
- hamburger-menu: a toggle button that opens a mobile navigation menu
- header: a page or section header area
- hidden-input: a hidden input for including data in form submission
- hint: hint text providing guidance for a form field
- holy-grail-layout: a classic layout with header, footer, main content, and two sidebars
- hover-card: a card that appears on hover over a trigger element
- icon: a container for displaying an icon
- image-file-input: an input for selecting image files with preview
- image: an image element with alt text
- information-callout: a callout box highlighting informational content
- input: a generic HTML input element
- inset-text: indented text to distinguish it from surrounding content
- kanban-table: a kanban board table interactive grid for organizing items by status
- kanban-table-head: a kanban board table interactive grid thead for organizing items by status
- kanban-table-body: a kanban board table interactive grid tbody for organizing items by status
- kanban-table-foot: a kanban board table interactive grid tfoot for organizing items by status
- kanban-table-col: a kanban board table interactive grid column for organizing items by status
- kanban-table-row: a kanban board interactive grid table row for organizing items by status
- kanban-table-data: kanban board table interactive grid data cell or organizing items by status
- label: a label associated with a form input
- listbox: a list of selectable options with keyboard navigation
- measurement-instance-input: an input for entering a measurement value and unit
- measurement-instance-view: a read-only display of a measurement value and unit
- measurement-system-input: an input for selecting a measurement system
- measurement-system-view: a read-only display of a measurement system
- measurement-unit-input: an input for selecting a measurement unit
- measurement-unit-view: a read-only display of a measurement unit
- medical-record-red-box: a red highlighted box for critical medical record information
- menu: a list of actions or options triggered by a button
- menu-item: one item in a menu
- menu-bar: a horizontal bar of menu triggers
- menu-bar-button: one item in a menu bar
- meter: a gauge displaying a scalar value within a known range
- month-input: an input for selecting a month and year
- navigation-menu: a site-wide navigation menu with links
- net-promoter-score-view: a read-only display of a Net Promoter Score
- net-promoter-score-picker: a picker for selecting a 0-10 Net Promoter Score
- net-promoter-score-picker-button: a picker button for selecting a 0-10 Net Promoter Score
- notification: a brief message about an event or update
- number-input: an input for entering a numeric value with validation
- option: an option element within a select dropdown
- pagination-nav: an ordered list of page navigation links
- pagination-list: an ordered list of page navigation links
- pagination-list-item: one page link in a pagination list
- panel: a generic content panel with optional heading
- password-input-div: an input for entering a password with obscured text
- pin-input-div: a series of single-digit inputs for entering a PIN or OTP code
- popover: a floating content box anchored to a trigger element
- popup: a temporary overlay that appears above page content
- postal-code-input: an input for entering a postal or ZIP code
- postal-code-view: a read-only display of a postal or ZIP code
- progress-circle: a circular progress indicator
- progress-spinner: an indeterminate spinning progress indicator
- progress: a horizontal progress bar showing completion
- qr-code: a QR code image generated from text or URL data
- radio-group: a group of radio buttons for selecting one option
- radio-input: a single radio button input
- range-input: a slider input for selecting a value within a range
- red-amber-green-view: a read-only display of a red/amber/green status
- red-amber-green-picker: a picker for selecting a red/amber/green status
- red-amber-green-picker-button: a picker button for selecting a red/amber/green status
- red-orange-yellow-green-blue-view: a read-only display of a five-level color status
- red-orange-yellow-green-blue-picker: a picker for selecting a five-level color status
- red-orange-yellow-green-blue-picker-button: a picker button for selecting a five-level color status
- reset-input: a button input that resets a form to default values
- resizable: a container that the user can resize by dragging
- review-date: a display of a content review date
- scroll-area: a scrollable container with custom scrollbar support
- scroll-bar: a custom scrollbar element
- search-input: an input for entering a search query
- segment-group: a group of mutually exclusive segment options
- segment-group-item: one selectable segment in a segment group
- select-with-extras: a select dropdown with additional features like search or groups
- select: a dropdown select element for choosing one option
- separator: a horizontal or vertical divider between content sections
- sheet: a panel that slides in from a screen edge as an overlay
- sidebar: a side panel for navigation or supplementary content
- signature-pad: a drawing area for capturing a handwritten signature
- skeleton: a placeholder loading animation for content
- skip-link: a hidden link for keyboard users to skip to main content
- slide-out-drawer: a drawer that slides out from the side of the page
- slider: a draggable control for selecting a value along a track
- sonner: a toast notification manager
- sparkline: a small inline chart showing a data trend
- splitter: a draggable divider for resizing adjacent panels
- submit-input: a button input that submits a form
- summary-list: an ordered list of key-value summary pairs
- summary-list-item: one key-value pair in a summary list
- switch-button: a toggle switch for turning a setting on or off
- tab-bar: a group of tabs for switching between content panels
- tab-bar-button: one tab button in a tab group
- table: a data table with rows and columns
- tag-group: a group of tag elements
- tag: a keyword label for categorizing content
- tag-input: an input for adding and removing tags
- task-bar: a horizontal bar of task shortcuts or actions
- task-bar-button: one item in a task bar
- task-list: an ordered list of task list items
- task-list-item: one task item with a checkbox and label
- tel-input: an input for entering a telephone number
- tel-link: a tel: hyperlink for a telephone number
- text-input: a single-line text input field
- textarea: a multi-line text input area
- theme-picker: a picker for selecting a visual theme
- theme-select: a select dropdown for choosing a theme
- theme-select-option: one option in a theme select dropdown
- theme-view: a read-only display of the current theme
- time-input: an input for entering a time value
- time-picker-input: an input with a dropdown for picking a time
- timeline-list: an ordered list of chronological events or milestones
- timeline-list-item: one event in a timeline list
- timer: a countdown or elapsed time display
- toast: a brief auto-dismissing notification message
- toggle-group: a group of toggle buttons for selecting options
- toggle-button: a button that toggles between pressed and unpressed states
- tool-bar: a horizontal bar of tool actions
- tool-bar-button: one action button in a tool bar
- tooltip: a small popup showing descriptive text on hover or focus
- tour: a tour guide, such as for sightseeing, or pathways, or demonstrations, etc.
- tour-list: an ordered list of tour guide steps
- tour-list-item: one step in a tour guide list
- tree-nav: a hierarchical navigation with expandable branches
- tree-nav-list: a hierarchical list with nested expandable items
- united-kingdom-national-health-service-number-input: an input for entering a UK NHS number
- united-kingdom-national-health-service-number-view: a read-only display of a UK NHS number
- united-states-social-security-number-input: an input for entering a US Social Security number
- united-states-social-security-number-view: a read-only display of a US Social Security number
- url-input: an input for entering a URL
- warning-callout: a callout box highlighting a warning message
- week-input: an input for selecting a week and year
Design Principles
- Accessible: Semantic HTML elements, ARIA roles/attributes, and keyboard navigation built in. WCAG 2.2 AAA.
- Composable: Compound components (e.g., Nav + NavList + NavListItem) snap together.
- Internationalizaable: All text comes through parameters such as translation systems. No hardcoded user-facing strings.
- Batteries-included examples: We provide complete examples with Svelte, React, Vue, Blazor.
- Semantic CSS friendly: If like CSS semantic classes such as Daisy, you can target each component by semantic class.
- Tailwind friendly: If you like CSS utilty classes such as Tailwind, you can use it in all the typical ways.
- Headless friendly: If you like to bring your own styles, you can use our headless versions with your own CSS.
Component name patterns
- *Bar *BarButton
- MenuBar MenuBarButton
- TabBar TabBarButton
- TaskBar TaskBarButton
- ToolBar ToolBarButton
- *Group *GroupItem
- SegmentGroup SegmentGroupItem
- *Guide *GuideList *GuideListItem
- Tour TourList TourListItem
- *List *ListItem
- CheckList CheckListItem
- ContentsList ContentsListItem
- DoList DoListItem
- DontList DontListItem
- PaginationList PaginationListItem
- SummaryList SummaryListItem
- *Nav *NavList *NavListItem
- AccordionNav AccordionNavList AccordionNavListItem
- BreadcrumbNav BreadcrumbNavList BreadcrumbNavListItem
- ContentsNav ContentsList ContentsListItem
- PaginationNav PaginationList PaginationListItem
- TreeNav TreeNavList
- *Select *SelectOption
- ThemeSelect ThemeSelectOption
- *Menu *MenuItem
- ContextMenu ContextMenuItem
- Menu MenuItem
- *Input *Link
- TelInput TelLink
- EmailInput EmailLink
- *Picker *PickerButton
- ColorPicker ColorPickerButton
- FiveFaceRatingPicker FiveFaceRatingPickerButton
- FiveStarRatingPicker FiveStarRatingPickerButton
- NetPromoterScorePicker NetPromoterScorePickerButton
- RedAmberGreenPicker RedAmberGreenPickerButton
- RedOrangeYellowGreenBluePicker RedOrangeYellowGreenBluePickerButton
- *Table *TableHead *TableBody *TableFoot *TableCol *TableRow *TableData
- CalendarTable CalendarTableHead CalendarTableBody CalendarTableFoot CalendarTableCol CalendarTableRow CalendarTableData
- DataTable DataTableHead DataTableBody DataTableFoot DataTableCol DataTableRow DataTableData
- GanttTable GanttTableHead GanttTableBody GanttTableFoot GanttTableCol GanttTableRow GanttTableData
- KanbanTable KanbanTableHead KanbanTableBody KanbanTableFoot KanbanTableCol KanbanTableRow KanbanTableData
Tracking
- Package: public-good-design-system-blazor-web-examples
- Version: 0.2.0
- Created: 2025-08-09T21:09:52Z
- Updated: 2026-03-04T11:46:48Z
- License: MIT or Apache-2.0 or GPL-2.0 or GPL-3.0 or contact us for more
- Contact: Joel Parker Henderson (joel@joelparkerhenderson.com)
