ServiceNow + Shadcn

[vincepg13]

Bringing shadcn to ServiceNow

I’ve been working on a way to bring my favourite UI library, shadcn, to ServiceNow in a way that’s straightforward for the average ServiceNow developer to get started with. I’d like to share a few repositories that further this goal.

---

🧩 SDK 4 Template

First up is the Shadkit Template - a repository that provides a ready-to-go starting point for an SDK 4 application with all the dependencies you need preinstalled to use shadcn. It includes Tailwind CSS, shadcn, a Vite development server, and TanStack Query for good measure.

The repository includes step-by-step instructions for getting everything set up, running locally, and building/deploying to ServiceNow.

While developing this template, I ran into a few interesting challenges - for example, Tailwind wouldn’t build properly using the standard PostCSS/Rollup setup. I also had to make several customisations to the now.prebuild.mjs file to get things running smoothly.

On top of that, a few npm packages mysteriously refused to work. After a lot of digging, I discovered that some ES6+ methods like Array.from and Array.entries are likely being monkey-patched at some point, causing unexpected behaviour. The template therefore includes a small polyfills folder that restores these methods to their expected signatures at runtime.

---

📦 NPM Package

Bundled with the template is an npm package I created: sn-shadcn-kit.

The goal of this package is to reduce development time for other ServiceNow developers by providing shadcn-based components that integrate directly with ServiceNow data.

I’ve prioritised the core components that most ServiceNow apps need - things like viewing forms, listing records, querying tables with a condition builder, and more. Developers can drop these components straight into their apps instead of building them from scratch.

The components follow a consistent design pattern:

• Inner components are focused purely on the UI.
  Examples: SnForm for viewing a form, DataTable for viewing a list.
• Outer components wrap these and handle all the ServiceNow-specific logic - fetching metadata, managing API calls, and preparing props.
  Examples: SnFormWrapper and SnTable.

This pattern gives you flexibility:
If you want full control over your API logic and state management, you can use the inner components directly. But if you just want things to work quickly and cleanly, you can let the outer components handle the heavy lifting.

---

💡 Demonstration App

While the sn-shadcn-kit README includes detailed documentation, I know many of us prefer to learn by exploring real code.

For that reason, I’ve built a demonstration repository - an SDK 4 application (built from the template above) that can be installed onto any instance via an update set. Once installed, you can visit the UI page and see all the components from the npm package in action.

Each demo component is backed by open source code in the repo, so you can explore how everything fits together.

---

🚀 Production Ready: Script Console

To showcase everything in a real-world scenario, I built Script Console - my first production-ready, shadcn-based application for ServiceNow.

Thanks to the reusable components in sn-shadcn-kit, I was able to get this app from concept to production in a fraction of the time. It includes components for viewing tables, displaying script fields, and working with forms - all powered by the shared kit.

---

🧠 Summary

This has been my first truly open-source project, and I’m really pleased to share it with the ServiceNow community.

Just a few months ago, I remember debating with other developers on LinkedIn about whether we’d ever get native support for modern frontend frameworks in ServiceNow. At the time, it felt like a pipe dream - but SDK 4 has proved otherwise.

SDK 4, combined with the Build Agent, has genuinely pushed custom app development on the platform to a new level. I hope ServiceNow continues this momentum and stays at the forefront of modern web technologies. (SSR, anyone?)

---

🔗 Repositories

• Shadkit Template – SDK 4 + shadcn starter
• sn-shadcn-kit – shadcn-based components for ServiceNow
• SDK 4 Demo App – live component showcase
• Script Console – production-ready example app

[edwincoronado]

looooove this. going to kick the tires on it too.