Koy UI
Check out the storybook:
@storybook/core - Storybook
Koy UI is a collection of Svelte components for building web applications.
koy-ui.vercel.app
GitHub repository:
Koy UI
Koy UI is a simple UI libirary for Svelte.
Storybook
Installation
npm install koy-ui
Background
First off, a disclaimer: I’m relatively new to Svelte, and UI development isn’t my full-time job—it’s more of a personal hobby. So, I wouldn’t claim that Koy UI is fully polished or perfect at this stage. That said, I’ve grown to love Svelte and use it frequently. However, compared to React, Svelte’s ecosystem is still quite limited. With Koy UI, I wanted to contribute something meaningful to the community.
The Motivation
I’ve always wanted to build a UI library but never had the right motivation. About a year ago, I started developing a personal project with SvelteKit, committing fully to it. However, midway through, I realized that even if I finished the product, selling it would be a huge challenge. In the end, I decided to abandon it.
When I decided to give up, I had already made over 500 commits to GitHub. It felt wasteful to let all that work go to nothing. That’s when I decided to extract the UI components I had carefully crafted and release them as an open-source library.
From Design to jsDoc
Defining Components in Figma
Although I’m a software engineer by profession, I’ve always been interested in UI design. I frequently follow design trends and check out media related to design. Over time, I’ve become fairly proficient with Figma. I started by creating wireframes, which I then transformed into components to build a design system.
Here’s a glimpse of some components I created: 👇
Once these were ready, I translated them into code. Having well-defined components in Figma significantly reduced the guesswork during coding. In fact, I aligned the naming of props with Figma for consistency.
Working Solo, Writing jsDoc Anyway
You might think writing jsDoc for a solo project is overkill, but I’ve learned from experience that it’s invaluable. Personal projects often face interruptions—losing motivation or getting busy can mean not touching a project for weeks or even months. By the time I return, my past work often feels unfamiliar, requiring extra time to relearn it. Worse, the frustration of re-familiarizing myself has led to abandoning several projects.
To prevent this, I make it a point to write jsDoc and comments, even if it’s just for myself. Here’s an example of a Button component I documented: 👇
Another great benefit of writing jsDoc is its integration with tools like Storybook. Modern Storybook can automatically generate documentation from jsDoc and TypeScript types. It’s incredibly convenient!
Directory Structure
This part isn’t Svelte-specific, but I took inspiration from Chakra UI v2’s component categorization:
Components - Chakra UI
Simple, Modular and Accessible UI Components for your React Applications.
v2.chakra-ui.com
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 for styling Koy UI. The main reason is that I wanted to write styles in TypeScript. Emotion is also framework-agnostic, making it easier to switch to React in the future if needed.
The Current State of Koy UI
Since this library was originally part of a specific project, it currently lacks customization options. I plan to improve this as I use it more.
When I started, Svelte v5 was still in alpha, so I built the library with v4 for stability. By the time I released it, v5 was out 😇. Fortunately, Svelte allows mixing v4 and v5 components without issues. Still, I plan to gradually transition to v5 to take advantage of its improvements.
Despite its current limitations, Koy UI is suitable for quick app development, much like the early days of Bootstrap. Feel free to give it a try!
Free to open issues and pull requests!
Top comments (0)