Design & UI Components

What are UI components and component libraries?

UI components are reusable interface building blocks, from buttons and form fields to data tables. A component library bundles these blocks in a consistent design and takes the hard details off your plate, such as keyboard navigation in dropdowns or focus management in dialogs. Two models have established themselves. Classic libraries like PrimeVue are installed as a package dependency, with updates arriving through the package manager. shadcn/ui popularized a different principle: the components are copied into your project as source code, and you own and modify them like your own code; shadcn-svelte brings this approach to Svelte. Distinct from both are UI kits, meaning design templates for tools like Figma, and icon sets, which supply the visual vocabulary of an interface.

Typical use cases

A product interface with its own design: If the interface should carry its own signature, the copy approach of shadcn/ui fits. You control markup and styles completely and never fight the CSS specificity of a third-party library.

Admin areas and internal tools: Here, data tables, forms, and charts matter more than design individuality. A broad library like PrimeVue covers these building blocks, so a dashboard stands in days rather than weeks.

Dashboards with movable elements: Tiles that can be rearranged and resized via drag and drop are expensive to build from scratch. GridStack.js delivers exactly this grid behavior as a standalone library.

Consistent icons across the product: A single icon set with consistent stroke width looks calmer than a mix from several sources and saves the cleanup work of aligning sizes and styles.

What matters when choosing

Dependency or code ownership: A packaged library delivers updates and bugfixes through the package manager but occasionally breaks its API in major versions. Copied components are yours to maintain, and in return no release cycle binds you.

Framework binding: Most libraries belong to one framework such as React, Vue, or Svelte. Beyond availability for your stack, check how well the project is maintained, visible in commit activity and how open issues are handled.

Accessibility: Making comboboxes, date pickers, and dialogs properly operable is among the hardest jobs in frontend work. A library that ships ARIA roles and keyboard handling saves you exactly that work. Do not rely on the "accessible" label; test the components with your keyboard.

License: Many libraries are MIT-licensed, and some vendors additionally sell finished templates or premium blocks. For icon sets, read the license terms before first use, especially regarding commercial use and attribution requirements.

Frequently asked questions

What is the difference between a UI kit and a component library?

A UI kit is a design template for tools like Figma: it provides drawn components for mockups and prototypes. A component library provides the same building blocks as working code for a specific framework. Many teams use both as a pair so that design and implementation speak the same building blocks.

Are component libraries free?

Most widely used libraries are MIT-licensed and free to use commercially, including shadcn/ui, shadcn-svelte, and the core of PrimeVue. What often costs money are add-ons like finished page templates or premium blocks. For icon sets, check the license, since some sets require attribution.

Above you will find more than 40 libraries, icon sets, and tools side by side, each with its own detail page. If your product needs its own design, start with the copy approach of shadcn/ui; for internal tools with many tables, the faster route runs through a broad library like PrimeVue.