shadcn-kotlin

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.