LIB/UI SvelteKit Components

LIB/UI is a collection of Svelte 5 components meant to be downloaded directly to src/lib/ui in your project. Since these are just files sitting in a directory and not hidden away in your Node modules, that means you can directly modify the components to fit your needs. This keeps things simple and transparent.

Getting Started

LIB/UI isn’t a Node package so it isn’t installed. Just download the zip file to your SvelteKit project’s src/lib/ and extract it. The only dependency requirement besides SvelteKit is SuperForms which is used for form validation in the <Form> component.

npm install sveltekit-superforms

How To Use

LIB/UI components are imported and instantiated like any other Svelte component.

<script>
  import { Spinner } from '$lib/ui';
</script>

<Spinner />

Properties

Properties are used to pass options to the component. For example, the Alert component takes an optional scheme property which can be used to set the color/icon theme of the alert.

<Alert scheme="danger">Something assploded.</Alert>

Named Slots

Slots are used to pass default content as seen in the above example. However, many LIB/UI components also use named slots to pass additional content to specific areas of the component. For example, the Alert component accepts an optional title slot which can be used to set a title to be displayed at the top of the alert.

<Alert scheme="success">
  <div slot="title">Hooray!</div>
  This is a total success.
</Alert>

CSS Custom Properties

CSS custom properties are used to set colors, spacing, and other values used by LIB/UI components. For example, to change the default border radius used for things like form elements and alerts, you could add this to your project’s CSS:

:root {
  --ui-border-radius: 4px;
}

This approach has a number of advantages over using regular Svelte props because of the way CSS rules cascade and can be overridden. For example, you can set a global border radius for all form elements, but then override it for a specific form element if needed. Or you can even create classes for your own alternate versions of LIB/UI components that are styled differently from the rest.

There are also CSS custom properties available for individual components. For example, the Alert component will use the global --ui-border-radius value by default. But you can change the default border radius for only Alert components like this:

:root {
  --ui-alert-border-radius: 8px;
}

You can even set custom properties directly on a single component instance in your Svelte file:

<Alert --ui-alert-border-radius="8px">
  This alert has a custom border radius.
</Alert>

This is made possible by a very handy Svelte Component Directive called --style-props which allows you to set custom properties directly within the scope of a component instance with the convenient shorthand syntax shown above.

If you need to create an alternate style for a component such as making a dark version of a Form, this can be easily done with a simple CSS class. All LIB/UI components have a lib-ui class and a class that matches the component’s name. So to create a dark version of a Form, you could create a class like this:

.lib-ui.Form.dark {
  --ui-input-background: #333;
  --ui-input-color: #fff;
  --ui-input-label-color: #fff;
  --ui-button-background: #444;
  --ui-button-color: #fff;
}

Then by adding the dark class to a Form component, these styles will be set for the Form element and all of its child components.

<Form class="dark">
  <Input label="name" />
  <Button>Submit</Button>
</Form>

There are many global custom properties that can be set to change the default appearance of LIB/UI components. They are all optional and will fall back to default values if not set.

Global CSS Custom Properties

CSS Classes

You can also pass a class property to any LIB/UI component to add additional classes to the component’s outermost element. This can be especially powerful when used with Tailwind utility classes – and of course, classes can also be used directly on named slots as usual. So for an Alert which has a fixed width and drop shadow and a title that’s underlined, you could do something like this:

<Alert scheme="success" class="w-96 shadow-xl">
  <div slot="title" class="underline">Hooray!</div>
  Item added to cart.
</Alert>

Modifying or Creating Components

Component files are well organized and commented to make it easy to understand what’s going on. You can modify the components as much or as little as you like. You can also delete the ones you don’t need. Be sure to also remove the reference from lib/ui/index.js.

Using one of the existing components as a template, you can also create your own components and add them to the lib/ui directory. Remember to also add a line to export your custom component from lib/ui/index.js.