karlsonn-ui

Karlsonn-ui is a Karlsonn design-based Svelte component library built with Flowbite and Tailwind CSS. Each component has a number of props that can be used to switch between the different designs of each component.

Components

Here's a complete list of documented components from this library. The class prop can be used on any component to add or override any class on the most outer tag of the component, except where the class prop is not listed.

base/Button.svelte

Props:

• as: string (default: 'a')
• text: string | undefined (default: '')
• extrasmall: boolean (default: false)
• size: 'mini' | 'extrasmall' | 'default' (default: 'default')
• class: string (default: '')

Slots:

• default

base/Footer.svelte

Props:

• as: string (default: 'footer')
• copyright_year: number
• starting_year: number | undefined (default: undefined)
• copyright_holder: string (default: '')
• class: string (default: '')

base/Header.svelte

Props:

• dark: boolean (default: false)
• transparent: boolean (default: false)
• locales: LocalesType
• selectedLocale: string
• class: string (default: '')

type LocalesType = {
	[k: string]: {
		name: string;
		languages: { id: string; name: string; }[];
	}
};

base/Heading.svelte

Props:

• as: string (default: 'h1', automatic sizing for: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6')
• text: string | undefined (default: '')
• bold: boolean (default: false)
• inline: boolean (default: false)
• class: string (default: '')

Slots:

• default

base/Input.svelte

Props:

• type: 'text' | 'passwd' | 'email' | 'phone' | 'number' | 'url' | 'textbox' | 'radio' | 'checkbox' ( default: 'text')
• label: string (default: '')
• placeholder: string (default: '')
• hint: string | string[] (default: '')
• mandatory: boolean (default: false)
• disabled: boolean (default: false)
• desc: string (default: '')
• items: string[] (default: ['Yes', 'No'])
• range: any[] (default: [])
• key: string (default: '')
• value: any (default: undefined)
• full: boolean (default: false)

base/Link.svelte

Props:

• as: string (default: 'a')
• text: string | undefined (default: '')
• class: string (default: '')

Slots:

• default

layout/Container.svelte

Props:

• as: string (default: 'div')
• center: boolean (default: false)
• full: boolean (default: false)
• size: 'extrasmall' | 'small' | 'default' | 'large' (default: 'default')
• class: string (default: '')

Slots:

• default

layout/Section.svelte

Props:

• as: string (default: 'section')
• class: string (default: '')

Slots:

• default