Basecoat

Basecoat

• Docs: https://basecoatui.com
• Package: basecoat-css

Install

CDN:

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/basecoat.cdn.min.css"
/>
<script
	src="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/js/all.min.js"
	defer
></script>

NPM:

npm i basecoat-css

@import "tailwindcss";
@import "basecoat-css";

ESM:

import "basecoat-css/all";
// or: import "basecoat-css/tabs";

JS Init

• Auto-init on DOMContentLoaded
• Manual: window.basecoat.init('tabs') or window.basecoat.initAll()

Icons

Basecoat uses Lucide icons. Options:

1. Copy SVG: Visit lucide.dev/icons, click any icon to copy SVG
2. Install package: npm i lucide - see lucide.dev/guide/installation
3. Framework packages: lucide.dev/packages for React/Vue/Angular/etc

Theming

Basecoat is fully compatible with shadcn/ui themes:

1. Go to ui.shadcn.com/themes or tweakcn.com
2. Click "Copy code" and save to theme.css
3. Import after Basecoat:

@import "tailwindcss";
@import "basecoat-css";
@import "./theme.css";

Styling & Customization

Override with Tailwind:

<button class="btn font-normal">Custom button</button>

Override with custom CSS:

@import "tailwindcss";
@import "basecoat-css";
@import "./custom.css";

Copy and modify source: Copy basecoat.css into your project and customize directly.

Tokens

Common design tokens: background, foreground, primary, primary-foreground, secondary, secondary-foreground, accent, accent-foreground, muted, muted-foreground, card, card-foreground, popover, popover-foreground, destructive, ring, input, border

Components

Layout & Structure

• Accordion - styled <details> element
• Card - container with header/content/footer
• Dialog - modal using native <dialog>
• Drawer - off-canvas dialog
• Field - form field with label/helper/error
• Fieldset - group related fields
• Form - form wrapper that styles children
• Input Group - input with icons/buttons

Form Controls

• Button - button variants and sizes
• Button Group - grouped buttons
• Checkbox - checkbox input
• Input - text input
• Label - form label
• Radio - radio input
• Select - native and custom select
• Switch - toggle switch
• Textarea - multi-line input

Navigation

• Breadcrumb - navigation path
• Pagination - page navigation
• Sidebar - collapsible navigation
• Table - data table
• Tabs - tabbed interface

Overlays

• Alert Dialog - critical confirmation dialog
• Dropdown Menu - contextual menu
• Popover - floating content panel
• Tooltip - hover info popup

Feedback

• Alert - callout for user attention
• Empty - empty state placeholder
• Progress - progress bar
• Skeleton - loading placeholder
• Spinner - loading spinner
• Toast - global notifications

Command & Search

• Command - command palette
• Combobox - select with search

Display

• Avatar - user image (Tailwind utilities)
• Badge - status indicators
• Carousel - scrollable content
• Chart - data visualization
• Item - list row with icon
• Kbd - keyboard key styling
• Slider - range input
• Theme Switcher - theme toggle

Events

• basecoat:initialized - on component root after init
• basecoat:popover - on document when popover opens
• basecoat:toast - on document to show toast

Rules

• Use documented classes only
• Package is basecoat-css (not basecoat)
• Interactive components need specific roles/attributes
• Framework-agnostic: no React/Radix deps