Skip to main content

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.

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

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

In Depth Documentation​

Be sure to view topic specific documentation to understand technology choices, best practices, established patterns, and enforced opinions.

Documents​

Modules​