@accelint/design-toolkit v1.0.1

Accelint Design Toolkit

This is the Accelint Design Toolkit, an open-source component library to serve as part of the entire ecosystem of UX for Accelint.

Running locally

To run the local Storybook instance

pnpm i

pnpm --filter=@accelint/design-toolkit preview

If you run into errors, try running pnpm build after you install the dependencies and then run the preview command again. If you don't have pnpm enabled then you can enable it with the command corepack enable pnpm .

Run a local build

pnpm --filter=@accelint/design-toolkit run build

Run local example app

To demonstrate usage in a Nextjs app:

pnpm --filter "*apps/next" run dev

Helpful extensions for VSCode

If you use Visual Studio Code, there are some helpful extensions you can install when working with Tailwind and Biome.

• Biome
• Tailwind CSS Intellisense
• Class Collapse

Also add the following to your settings.json file for VSCode:

    "editor.codeActionsOnSave": {
        "quickfix.biome": "explicit"
    },
    "tailwindCSS.includeLanguages": {
        "javascript": "javascript",
        "javascriptreact": "javascriptreact",
        "typescript": "typescript",
        "typescriptreact": "typescriptreact",
        "html": "html"
    },
    "tailwindCSS.experimental.classRegex": [
        ["/\\*tw\\*/ '([^']*)'"],
        ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
        ["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
        ["className\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
    ],
    "files.associations": {
        "*.css": "tailwindcss"
    }