Karlsonn-ui NPM

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)