quick-components-kit

A Svelte component library and toolkit

Install

You can install the library via npm.

npm install @hashrytech/quick-components-kit

or via yarn:

yarn add @hashrytech/quick-components-kit

Iconify setup

If you use the Icon component or pass string-based icon classes to components such as Button, the consuming app must provide the Iconify Tailwind plugin and the icon collections it uses.

Example:

npm install -D @iconify/tailwind4 @iconify-json/ri

Then enable the plugin in your app CSS:

@plugin "@iconify/tailwind4";

Why this is required:

• Iconify resolves icons at the consuming app's Tailwind build time.
• This package's own devDependencies are not available to another app's build pipeline.

Releases

Push to main with Conventional Commits. CI runs semantic-release to:

• calculate semantic version bump (fix/patch/perf/revert = patch, feat = minor, BREAKING CHANGE/! = minor)
• generate release notes from commit messages
• update CHANGELOG.md
• Tag and create GitHub release
• publish to npm
• example commit message: patch: fix div width

Commit message format

Use Conventional Commit format:

type(scope): short summary

Examples:

fix(button): correct disabled styles
patch(button): adjust icon spacing
feat(button): add loading slot
feat!: remove deprecated button prop

Notes:

• patch: is supported and creates a patch release.
• ! or BREAKING CHANGE: creates a minor release.
• docs:, chore:, style:, test: and other non-release types do not trigger a version bump.
• If a commit is not a valid Conventional Commit, CI commitlint fails and the release job stops before publishing.
• Use a lowercase imperative summary. Good: fix(drawer): add local scroll lock action. Bad: patch: Adding disable local scroll action.
• If commitlint rejects your last commit message, amend it with:

git commit --amend -m "fix(drawer): add local scroll lock action"

Configurations

Set default theme values for primary and secondary variables:

• Color gradient
• Shadow
• Border radius

Default Theme

@theme {

    --breakpoint-xs: 480px;
    --breakpoint-xxs: 400px;
    --breakpoint-xxxs: 360px;
    --breakpoint-xxxxs: 320px;

    --color-primary-50: oklch(0.967 0.07 95.38);
    --color-primary-100: oklch(0.933 0.094 95.47);
    --color-primary-200: oklch(0.864 0.128 95.3);
    --color-primary-300: oklch(0.767 0.165 95.31);
    --color-primary-400: oklch(0.678 0.19 95.1);
    --color-primary-500: oklch(0.608 0.2 94.82);
    --color-primary-600: oklch(0.496 0.17 94.91);
    --color-primary-700: oklch(0.397 0.145 94.53);
    --color-primary-800: oklch(0.326 0.123 94.55);
    --color-primary-900: oklch(0.282 0.106 94.7);
    --color-primary-950: oklch(0.161 0.081 94.91);

    --color-secondary-50: oklch(0.972 0.037 19.87);
    --color-secondary-100: oklch(0.945 0.046 19.95);
    --color-secondary-200: oklch(0.868 0.092 19.81);
    --color-secondary-300: oklch(0.749 0.158 20.04);
    --color-secondary-400: oklch(0.618 0.226 20.19);
    --color-secondary-500: oklch(0.519 0.26 20.31);
    --color-secondary-600: oklch(0.437 0.229 20.44);
    --color-secondary-700: oklch(0.352 0.197 20.45);
    --color-secondary-800: oklch(0.293 0.172 20.38);
    --color-secondary-900: oklch(0.252 0.15 20.25);
    --color-secondary-950: oklch(0.131 0.098 19.98);

    --shadow-primary: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-secondary: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --radius-primary: 0.5rem;
    --radius-secondary: 0.375rem;
}

FIX