shadcn-kotlin is an unofficial, open-source port of shadcn/ui that brings the accessible and customizable component library to Kotlin/JS via the Kobweb framework.
What is shadcn-kotlin?
shadcn-kotlin is a free, MIT-licensed component library for Kotlin/JS developers. It reimplements the shadcn/ui concept—components you copy into your own codebase—using Kotlin, the Kobweb web framework, Kotlin JS wrappers for React, and Tailwind CSS via the tailwind-kt Gradle plugin. The project is inspired by shadcn/ui but is not affiliated with it, and was created by the developer dead8309.
What makes shadcn-kotlin stand out?
- Kotlin/JS native — All components are written in Kotlin/JS using Kotlin JS wrappers for React, so you can build web UIs entirely in Kotlin.
- Tailwind CSS integration — The tailwind-kt Gradle plugin automatically wires Tailwind CSS into the Kotlin build, removing the need for manual configuration.
- Copy-and-own components — Following shadcn/ui's philosophy, components are copied into your project rather than installed from a package registry, giving you full control over their implementation.
- Kobweb-based — Built on Kobweb, a Kotlin framework that compiles Kotlin code to run in the browser.
- Accessible — The library focuses on accessible components, matching the accessibility goals of the original shadcn/ui.
- Open source — Released under the MIT license, so it's free to use and modify.
Who is shadcn-kotlin for?
- Kotlin developers who want to create web applications without switching to JavaScript. They can use shadcn-kotlin to build UIs in their preferred language.
- Teams that already use shadcn/ui who are exploring Kotlin/JS projects and want a familiar component library.
- Kobweb users who need a ready-made set of UI components to speed up their development.
What can you do with shadcn-kotlin?
- Build web app interfaces — Create React-based UI components inside a Kobweb project, using Kotlin code and Tailwind CSS styling.
- Customize components — Since components live in your codebase, you can modify their Tailwind classes and Kotlin logic to match your design system.
- Run the example site — Clone the repository, navigate to the site folder, and run
kobweb run to see the components in action at localhost:8080, then use them as a reference.
How does shadcn-kotlin work?
After cloning the repository and installing Kobweb, you run kobweb run from the site directory. This builds the project and starts a local development server. The Tailwind CSS integration is handled automatically by the tailwind-kt plugin, so you can start using components without manual setup.
Pricing
shadcn-kotlin is completely free and open source under the MIT license. There are no paid tiers or premium features.
FAQ
Is shadcn-kotlin free?
Yes. The project is released under the MIT license, so it is free to use, modify, and distribute.
Does shadcn-kotlin require Kobweb?
Yes. Kobweb is essential for building and running the project. You must install the Kobweb binary and follow the setup guide before running kobweb run.
Is shadcn-kotlin affiliated with the original shadcn/ui?
No. The project is an unofficial port inspired by shadcn/ui. It is not endorsed by or affiliated with shadcn.
