Framework Integrations

This guide targets front-end developers integrating design-lint into specific ecosystems.

React

Lint React components and CSS-in-JS files:

bash

npx design-lint "src/**/*.{ts,tsx,css}"

json

// designlint.config.json
{
  "rules": { "design-system/component-usage": "error" }
}

Run design-lint alongside next lint or as a separate script. The example below enforces token usage in pages and components:

bash

npx design-lint pages components

.vue single‑file components are parsed so template, script, and style blocks are checked automatically.

bash

npx design-lint "src/**/*.vue"

Svelte components include <script> and <style> sections. design-lint understands both:

bash

npx design-lint src/routes

Angular, Astro, and static HTML files work out of the box as long as file extensions are provided. Adjust glob patterns accordingly.