Basecoat uses Lucide icons. You have three options:
Copy SVG code: Visit lucide.dev/icons, click any icon to copy the SVG, and paste it directly in your HTML. Best for simple projects or occasional icon usage.
Install lucide: Follow the installation guide to install the lucide package and dynamically render icons. Best for projects that need many icons or want tree-shaking.
Use framework packages: Browse framework-specific packages (React, Vue, Angular, etc.) for component-based icon usage. Best if you're using a supported framework.
Basecoat does not ship web fonts by default. The Basecoat docs site uses the same font choices as the current shadcn/ui site: Geist Sans for sans and heading text, and Geist Mono for monospace text.
To use the same setup, load the fonts and override the font tokens after importing Basecoat:
Basecoat style packs combine shared Basecoat structure with visual rules for each component. If you want to write a full custom style, import the styleless Basecoat base and then your own style file.
basecoat-css/base includes Basecoat tokens, semantic utilities, and component structure, but no Vega/Nova/Maia/etc. visual style pack. Your style file is responsible for component visuals such as colors, radius, shadows, focus rings, spacing, and variant treatment.
The practical way to start is to copy one existing style pack, rename it, and edit from there. The style files live in src/css/styles/ and are also published under basecoat-css/styles/*.
{% set code %}@import "basecoat-css/base";
@import "./style-acme.css";
/* style-acme.css can start as a copy of basecoat-css/styles/nova. */{% endset %}
{{ code_block(code, "css") }}
Do not load a full Basecoat style bundle and then override it wholesale. For example, avoid importing basecoat-css/nova before your custom style. That loads Nova component visuals and forces your file to undo them. Use basecoat-css/base instead.