I build a UI library for Svelte for my first time

Coy user interface

Check out the storybook:

GitHub repository:

npm install koy-ui

background

First, a disclaimer: I’m relatively new to Svelte, and UI development is not my full-time job, it’s more of a personal hobby. Therefore, I wouldn’t say that Koy UI is completely polished or perfect at this stage. That said, I’ve grown to like Svelte and use it regularly. However, Svelte’s ecosystem is still quite limited compared to React. Through Koy UI, I want to contribute something meaningful to the community.

motivation

I’ve always wanted to build a UI library, but never had the right motivation. About a year ago I started working on a personal project using SvelteKit and threw myself into it. However, midway through I realized that even if I finished the product, selling it would be a huge challenge. Finally, I decided to give it up.

I had made over 500 commits to GitHub when I decided to give up. It feels like a waste to have all that work go to waste. That’s when I decided to extract my carefully crafted UI components and release them as an open source library.

From design to jsDoc

Define components in Figma

Although I am a software engineer by profession, I have always been interested in UI design. I often follow design trends and look at design-related media. Over time, I’ve become quite proficient with Figma. I build the design system by first creating wireframes and then converting them into components.

Here’s a peek at some of the components I created: 👇

Once these are ready, I translate them into code. Well-defined components in Figma significantly reduce the guesswork during coding. In fact, for the sake of consistency, I kept the naming of the props consistent with Figma.

Work independently and write jsDoc no matter what

You might think that writing jsDoc for a separate project is overkill, but I know from experience that its value is priceless. Personal projects often face interruptions—losing momentum or becoming busy can mean weeks or even months of not working on a project. When I return, I often feel that my past job is unfamiliar and requires extra time to relearn. To make matters worse, the frustration of reacquainting myself caused me to abandon several projects.

To prevent this from happening, I wrote jsDoc and comments specifically, if only for myself. This is an example of the Button component I recorded: 👇

Another great benefit of writing jsDoc is its integration with tools like Storybook. Modern Storybook can automatically generate files from jsDoc and TypeScript types. Very convenient!

Directory structure

This part is not specific to Svelte, but I took inspiration from Chakra UI v2’s widget classification:

src/lib/ui/components
├── base
│   ├── Badge
│   ├── Button
│   ├── ButtonIcon
│   ├── Divider
│   ├── Link
│   ├── Typography
│   └── index.ts
├── display
│   ├── ListGroup
│   ├── ProgressBar
│   └── index.ts
├── feedback
│   ├── Alert
│   ├── Overlay
│   ├── Skeleton
│   ├── Spinner
│   └── index.ts
├── form
│   ├── CheckBox
│   ├── FormLabel
│   ├── FormRow
│   ├── Input
│   ├── PasswordInput
│   ├── SelectBox
│   ├── SingleChoicer
│   ├── TextArea
│   └── index.ts
├── icons
│   ├── ArrowLeft.svelte
│   ├── ArrowRight.svelte
│   └── index.ts
├── index.ts
├── layout
│   ├── PageLayout
│   ├── Stack
│   └── index.ts
├── overlay
│   ├── BottomSheet
│   ├── DropDown
│   ├── Modal
│   └── index.ts
└── useful
    ├── ConfirmModal
    ├── HiddenUntilLoaded
    ├── When
    ├── createMediaQuery.ts
    └── index.ts

styling components

Although Svelte’s scoped styles eliminate the need for CSS-in-JS, I chose to use Emotion to style the Koy UI. The main reason is that I want to use TypeScript to write styles. Emotion is also framework agnostic, making it easier to switch to React in the future if the need arises.

Current status of Koy UI

Since the library was originally part of a specific project, customization options are currently lacking. I plan to improve it as I use it more.

When I started, Svelte v5 was still in alpha, so I built the library using v4 to ensure stability. When I released it, v5 was already out. Fortunately, Svelte allows mixing v4 and v5 components without any problems. Nonetheless, I plan to gradually transition to v5 to take advantage of its improvements.

Despite its current limitations, Koy UI is still suitable for rapid application development, just like Bootstrap was in its early days. Please feel free to try it!

Issues and pull requests are free!