# hunvreus/basecoat

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/hunvreus-basecoat).**

3,653 stars · 111 forks · JavaScript · mit

## Links

- GitHub: https://github.com/hunvreus/basecoat
- Homepage: https://basecoatui.com
- awesome-repositories: https://awesome-repositories.com/repository/hunvreus-basecoat.md

## Topics

`alpine` `components` `components-library` `html` `javascript` `js` `shadcn` `shadcnui` `tailwind` `tailwindcss` `ui` `uikit` `vanilla-javascript` `vanilla-js`

## Description

Basecoat is a zero-runtime UI library and themable interface framework consisting of a set of accessible web components. It provides a collection of pre-styled interface elements and utility classes designed to function as static assets without requiring a dedicated JavaScript framework runtime.

The project features a dedicated UI component scaffolder, providing a command line interface to automate the generation of project folder structures and the installation of component templates. Visual styles are managed through a system of CSS variables and utility classes, allowing for global theme application and page theme toggling via custom events.

The library covers a broad surface of accessible interface elements, including comprehensive form inputs, layout containers, navigation patterns, and overlay components. These elements utilize ARIA standards and semantic HTML to ensure accessibility across inputs, modals, and navigation menus.

A command line utility is provided to automate the setup of these components by copying JavaScript and template macros directly into a project directory.

## Tags

### User Interface & Experience

- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Provides a comprehensive library of pre-styled UI components optimized for modern accessibility standards without a JS runtime. ([source](https://cdn.jsdelivr.net/gh/hunvreus/basecoat@main/README.md))
- [Accessibility Attribute Bindings](https://awesome-repositories.com/f/user-interface-experience/accessibility-attribute-bindings.md) — Implements ARIA identity links and unique identifiers to ensure UI elements satisfy accessibility requirements.
- [Badge Components](https://awesome-repositories.com/f/user-interface-experience/badge-components.md) — Provides small styled labels and chips used to categorize information or indicate status. ([source](https://basecoatui.com/components/badge))
- [Button Groups](https://awesome-repositories.com/f/user-interface-experience/buttons/button-groups.md) — Provides layout components that organize related action buttons into unified toolbars or grouped sets. ([source](https://basecoatui.com/components/button-group))
- [Custom Color Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/color-themes/custom-color-theme-definitions.md) — Allows defining new global color themes and visual styles using CSS custom properties.
- [CSS Component Libraries](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries.md) — Offers a collection of pre-styled interface elements and utility classes for standard HTML.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Defines global visual styles by mapping design tokens to native CSS variables.
- [Accordion Panels](https://awesome-repositories.com/f/user-interface-experience/data-display-components/accordion-panels.md) — Provides collapsible UI components that toggle content visibility to manage space within an interface. ([source](https://basecoatui.com/components/accordion))
- [Form and Input Management](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management.md) — Implements a comprehensive system of form controls, including searchable selects and validated inputs.
- [Field Containers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/field-containers.md) — Ships accessible wrappers that group input elements, labels, and helper text into single units. ([source](https://basecoatui.com/components/field))
- [Input Groups](https://awesome-repositories.com/f/user-interface-experience/form-components/input-groups.md) — Provides components that bundle input fields with adjacent text, buttons, or icons. ([source](https://basecoatui.com/components/input-group))
- [Field Groups](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/field-groups.md) — Provides semantic sections to organize multiple controls with collective headings and descriptive text. ([source](https://basecoatui.com/components/field))
- [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Provides accessible checkbox components for binary user input with styles for standard and invalid states. ([source](https://basecoatui.com/components/checkbox))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Provides toggle switch components for capturing binary true or false states with ARIA roles. ([source](https://basecoatui.com/components/switch))
- [Generic Button Components](https://awesome-repositories.com/f/user-interface-experience/generic-button-components.md) — Provides general-purpose interactive button components with configurable styles and action priorities. ([source](https://basecoatui.com/components/button))
- [Web Accessibility Compliance](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/web-accessibility-compliance.md) — Ensures the user interface follows ARIA standards and accessibility best practices for forms and navigation.
- [Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs.md) — Provides dropdown components for choosing values from a list and dispatching change events. ([source](https://basecoatui.com/components/select))
- [Radio Groups](https://awesome-repositories.com/f/user-interface-experience/radio-groups.md) — Implements accessible components for managing single-choice selection from a set of mutually exclusive options. ([source](https://basecoatui.com/components/radio-group))
- [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Provides accessible input controls for selecting values within a defined range using a styled track and thumb. ([source](https://basecoatui.com/components/slider))
- [Searchable Select Inputs](https://awesome-repositories.com/f/user-interface-experience/selection-lists/searchable-select-inputs.md) — Ships select components with integrated search inputs for filtering large lists of values. ([source](https://basecoatui.com/components/combobox))
- [CSS Class-Based Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling.md) — Provides a system of utility classes to toggle visual themes and style variants for interface elements.
- [CSS Variable Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems.md) — Employs a styling architecture using native CSS variables for theme propagation and dynamic property management.
- [Textarea Components](https://awesome-repositories.com/f/user-interface-experience/textarea-components.md) — Provides accessible multi-line text input components with support for validation states. ([source](https://basecoatui.com/components/textarea))
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Provides a consistent set of reusable interface elements and interaction patterns for web projects.
- [Form Labels](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/form-labels.md) — Provides visual labels that associate with input fields and react to the element state. ([source](https://basecoatui.com/components/label))
- [Visual Style Customization](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization.md) — Provides mechanisms for applying themes and visual configurations to customize the appearance of the interface. ([source](https://basecoatui.com/installation))
- [Avatar Components](https://awesome-repositories.com/f/user-interface-experience/avatar-components.md) — Provides accessible avatar components for displaying user profile images or placeholders. ([source](https://basecoatui.com/components/avatar))
- [Theme Application & Switching](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching.md) — Provides a system to apply and switch global visual themes using external variable sources. ([source](https://basecoatui.com/installation))
- [Command Palettes](https://awesome-repositories.com/f/user-interface-experience/command-palettes.md) — Provides a searchable interface for triggering actions and navigating using grouped items. ([source](https://basecoatui.com/components/command))
- [Component Event Triggers](https://awesome-repositories.com/f/user-interface-experience/component-event-triggers.md) — Dispatches custom browser events to trigger logic when components initialize or change state. ([source](https://basecoatui.com/components/combobox))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/content-display-components/tooltips.md) — Provides UI elements that display advisory text when a user focuses on or hovers over a component. ([source](https://basecoatui.com/components/tooltip))
- [Content Cards](https://awesome-repositories.com/f/user-interface-experience/data-display-components/content-cards.md) — Provides flexible content card containers with headers and footers for grouping related information. ([source](https://basecoatui.com/components/card))
- [Data Table Components](https://awesome-repositories.com/f/user-interface-experience/data-table-components.md) — Implements UI components for presenting structured tabular information within web interfaces. ([source](https://basecoatui.com/components/table))
- [Event-Driven State Managers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers.md) — Manages component visibility and behavior by dispatching and listening for custom browser events.
- [HTML Markup Templates](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates.md) — Implements customizable string templates to generate the required HTML and JavaScript for complex UI components. ([source](https://basecoatui.com/installation))
- [Item Lists](https://awesome-repositories.com/f/user-interface-experience/item-lists.md) — Provides list item layouts with titles and descriptions, including hover and focus states. ([source](https://basecoatui.com/components/item))
- [Breadcrumbs](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumbs.md) — Implements navigation trails that show the user's current location within a site hierarchy. ([source](https://basecoatui.com/components/breadcrumb))
- [Alert Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs.md) — Provides modal alert dialogs that require a mandatory user response before closing. ([source](https://basecoatui.com/components/alert-dialog))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-components/dropdown-menus.md) — Provides accessible dropdown menus with triggers and grouped options for navigation. ([source](https://basecoatui.com/components/dropdown-menu))
- [Pagination Controls](https://awesome-repositories.com/f/user-interface-experience/navigation-components/pagination-controls.md) — Implements accessible navigational buttons to divide large content sets into sequential pages. ([source](https://basecoatui.com/components/pagination))
- [Notification Toasts](https://awesome-repositories.com/f/user-interface-experience/notification-toasts.md) — Implements transient UI toast notifications for displaying system messages with severity-based styling. ([source](https://basecoatui.com/components/toast))
- [Popover Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays.md) — Provides floating content panels that are positioned relative to a trigger element. ([source](https://basecoatui.com/components/popover))
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays.md) — Provides accessible modal window components that require user interaction to dismiss. ([source](https://basecoatui.com/components/dialog))
- [Component-Wide Theme Toggles](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/dark-mode-strategies/component-wide-theme-toggles.md) — Implements a mechanism to toggle active visual themes via custom events for synchronized adaptation. ([source](https://basecoatui.com/components/theme-switcher))
- [Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators.md) — Implements visual track and fill indicators to show the completion status of tasks. ([source](https://basecoatui.com/components/progress))
- [Sidebars](https://awesome-repositories.com/f/user-interface-experience/sidebars.md) — Implements a system to toggle the visibility of navigation sidebars via custom events. ([source](https://basecoatui.com/components/sidebar))
- [Skeleton Loaders](https://awesome-repositories.com/f/user-interface-experience/skeleton-loaders.md) — Provides pulsing skeleton loaders to prevent layout shift during content loading. ([source](https://basecoatui.com/components/skeleton))
- [Status Alerts](https://awesome-repositories.com/f/user-interface-experience/status-alerts.md) — Ships notification banners with icons and titles for communicating system feedback. ([source](https://basecoatui.com/kitchen-sink))
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Provides selectable tabbed interfaces for organizing content via keyboard or mouse. ([source](https://basecoatui.com/components/tabs))
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators.md) — Provides animated loading indicators for buttons and containers to signal background processing. ([source](https://basecoatui.com/components/spinner))

### Web Development

- [Zero-Runtime Frontend Frameworks](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/frontend-architectures/zero-runtime-frontend-frameworks.md) — Provides a library of components that function as static assets without requiring a JavaScript framework runtime.

### Part of an Awesome List

- [Text Input Fields](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/text-input-fields.md) — Provides styled text input fields for user data entry with support for validation error states. ([source](https://basecoatui.com/components/input))
- [Collapsible Navigation Sidebars](https://awesome-repositories.com/f/awesome-lists/devtools/navigation-and-menus/collapsible-navigation-sidebars.md) — Provides responsive sidebar navigation panels with collapsible sections and grouped links. ([source](https://basecoatui.com/components/sidebar))

### Development Tools & Productivity

- [Web Component Scaffolding](https://awesome-repositories.com/f/development-tools-productivity/command-line-scaffolding/web-component-scaffolding.md) — Accelerates web interface setup by generating folder structures and macros via the command line.
- [Framework-Agnostic Component Scaffolding](https://awesome-repositories.com/f/development-tools-productivity/framework-agnostic-component-scaffolding.md) — Includes a command line tool for automating the initial folder and file layout of new UI components. ([source](https://basecoatui.com/introduction))
- [CLI Component Templates](https://awesome-repositories.com/f/development-tools-productivity/source-code-distribution/cli-component-templates.md) — Provides a CLI utility for distributing raw component source code and template macros for local modification. ([source](https://basecoatui.com/installation))
- [UI Component Scaffolders](https://awesome-repositories.com/f/development-tools-productivity/ui-component-scaffolders.md) — Includes a dedicated CLI tool that generates the necessary directory and file layouts for implementing interface components.

### Software Engineering & Architecture

- [Component Markup Macros](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/configuration-management/automation-and-templating-frameworks/template-macros/component-markup-macros.md) — Uses predefined template macros to expand complex HTML and JavaScript structures during the build process.
- [Boilerplate Scaffolders](https://awesome-repositories.com/f/software-engineering-architecture/schema-driven-generators/cli-command-generators/boilerplate-scaffolders.md) — Ships a CLI tool that generates standardized folder structures and boilerplate files for new components.

### System Administration & Monitoring

- [System Callout Components](https://awesome-repositories.com/f/system-administration-monitoring/system-callout-components.md) — Provides callout containers for communicating system messages and errors. ([source](https://basecoatui.com/components/alert))