How to Contribute

Here are some guidelines we'd like you to follow before submitting a PR.

Create a fork

Create a fork from Flowbite-Svelte to your repository first.

Please use pnpm to install a fork

The repo uses `pnpm`, so using `pnpm` is desirable when you fork and install dependencies to avoid unseen problems.

When there is a change in package.json, remove pnpm-lock.yml and node_modules directory and run `pnpm i`.

Tailwind CSS

Tailwind warns that you don't construct class names dynamically. Instead of this:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

Always use complete class names:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Types and Props

Add a type to `export`ed variables. When we generate props files, it will automatically pick up types from your file. If you don't add a type, it will break.

Use `lib/types file for nested objects.

// these work
export let icons: AccordionIconType = {
  up: ChevronUpSolid,
  down: ChevronDownSolid

export let child: TopMenuType[] | undefined = undefined;

// doesn't work
export let comment: CommentType = {
  id: number | string;
  user: {
    name: string;
    joined: string;
// put it in lib/types
export interface CommentType {
  id: number | string;
  user: {
    name: string;
    joined: string;

// then 
export let comment: CommentType;

See more details in the [createprops' README]( file.

Please run the following to update prop files.

npm run gen:props

This script will update/generate files in `src/routes/props`.

Again avoid type inference for `export`ed variables.

Conventional commit

When making a commit, we recommend using the Conventional commits.

Some examples are:

feat: add rating component
fix: add if statement to Button component
chore: clean up About page
docs: add timeline page
style: update home page
test: add modal test

Use `!` for a minor bump.

feat!: add drawer compoent and page

When you have a breaking change:

git commit -a "feat: change btnClass name to bClass" -m "BREAKING CHANGE: change the Button component attributes"

Playwright Test

Before submitting a PR, please run a test:

npm run test

If you want to run an single test file, tests/typography.spec.ts:

npx playwright test tests/typography.spec.ts

A11y Test

Please test a page with [Nu Html Checker]( relating to your change.

Test a page.

axe http://localhost:3000/dropdowns/image