Please share your thoughts on how we should build our shared component library

[niculistana]

A shared component library should be considered for BetterGov and it's subdomains because:

• Consistency: Repeated interaction patterns create familiarity and trust.
• Reusability: One component serves multiple contexts (e.g., card for projects and news).
• Accessibility: Global components handle structure and compliance once, universally.
• Scalability: New pages can be composed from existing modules without reinventing UI.

One of the deliverables for the Kapwa Design System Roadmap is to have a shared component library.

So far we are considering wrapping existing shadcn components and we would like to know which component libraries people used before and what they liked about it.

If anyone has thoughts to share please add it below 📝! Thank you.

[niculistana]

Potential BetterGov Shared Components Using ShadCN

Shared Component	Purpose / UX Role	ShadCN Component(s)	Link to ShadCN Docs
Global Header / Navigation Bar	Persistent site navigation; keeps main sections always accessible	Navigation Menu, Menubar, Sidebar	https://ui.shadcn.com/docs/components/navigation-menu
Search Bar / Search Box	Enables fast “find what I need” navigation	Combobox, Command, Input	https://ui.shadcn.com/docs/components/combobox
Breadcrumb Navigation	Shows user location hierarchy; helps with orientation	Breadcrumb	https://ui.shadcn.com/docs/components/breadcrumb
Hero Section / Page Header	Introduces page context / identity	Typography, Card, Avatar (composite)	https://ui.shadcn.com/docs/components/typography
Card Component	Summarizes entry (title, description, link, image/icon)	Card	https://ui.shadcn.com/docs/components/card
Filter / Sort Controls	Narrow large datasets (type, region, status)	Select, Radio Group, Checkbox, Switch	https://ui.shadcn.com/docs/components/select
Pagination / Load more Controls	Breaks lists into manageable pages / chunks	Pagination	https://ui.shadcn.com/docs/components/pagination
Interactive Map Component	Visualizes geographic data	None / external library (Leaflet, Mapbox)
Footer	Secondary nav, legal links, trust info, contact	Navigation Menu, Typography (composite)	https://ui.shadcn.com/docs/components/navigation-menu
Call-to-Action (CTA) Buttons / Links	Encourage next-step actions	Button, Button Group	https://ui.shadcn.com/docs/components/button
Tag / Label / Category Chip	Display metadata (topics, status, type)	Badge	https://ui.shadcn.com/docs/components/badge
Feedback / Contact Form	Structured user input for feedback / contribution	Form, Input, Textarea, Label	https://ui.shadcn.com/docs/components/field
Content Section Block (Text + Image)	Narrative blocks combining text and media	Typography, Aspect Ratio	https://ui.shadcn.com/docs/components/aspect-ratio
Progress Indicator / Status Bar	Communicate progress / completion / status	Progress, Badge	https://ui.shadcn.com/docs/components/progress
Back to Top Button	Facilitates navigation on long pages	Button, Scroll Area	https://ui.shadcn.com/docs/components/scroll-area
Language / Accessibility Toggle	Switch display modes or languages	Switch, Toggle	https://ui.shadcn.com/docs/components/switch
Loading / Empty States	Provide feedback when content is loading or no data found	Skeleton, Empty	https://ui.shadcn.com/docs/components/skeleton
Modal / Overlay Dialog	Focused interaction without leaving current context	Dialog, Sheet, Drawer, Popover	https://ui.shadcn.com/docs/components/dialog
Notification / Alert Banner	Show important messages or system alerts	Alert, Toast	https://ui.shadcn.com/docs/components/alert

[butadpj]

Thanks for starting this @niculistana ! 🙏 Sharing my thoughts on using ShadCN to build our own Component Library for Kapwa.

1. From ShadCN's hook itself - "The Foundation for your Design System". This choice makes the most sense for a design system because of its "copy and paste" component approach, built on Radix UI (for accessibility) and how it's well-integrated with Tailwind CSS.
2. ShadCN components are already built with the latest industry's best practices. Components are composable so it can naturally support the creation of a robust and scalable design system.
3. I'm done glazing over ShadCN... I guess it's time to shed light on what approach is better for serving our components to consumers (by consumers' projects in bettergov).
   • Approach 1: Registry (npx shadcn@latest add https://design-system.bettergov.ph/r/card.json) - I personally dont see this as a "better way to share components than npm" like what they're claiming it to be. Based on my understanding, the components are going to get "copied" to the consumers codebase just like how you would add a ShadCN component. This makes the components decentralized and if there happens to be some updates from our designers, devs now need to update multiple places instead of updating only one place.
   • Approach 2: Package (install kapwa via npm and import a component)

[niculistana]

@butadpj Thank you for sharing your thoughts! Yeah I think we can enable both approaches (registry, and as a package) with the component library. And because bettergov uses shadcn it can use the shadcn commands to import the component from kapwa.

Not 100% sure how it works exactly but I've read that shadcn hooks into LLMs through their registry (components.json). So. theoretically we could build an app-builder application that uses kapwa along-side an LLM.