DEV Community: suren_

UI-Package: Multi-Framework UI Component Registry for Frontend Developers

suren_ — Mon, 19 Oct 2026 15:23:43 +0000

Web applications frequently use forms, tables, dialogs, and dashboard layouts. Developers must modify component source code to satisfy custom application requirements.

UI-Package provides a registry of prebuilt components, blocks, charts, and templates. The registry supports Vue, React, Angular, Svelte, and Lit Web Components. You can preview components and copy the source code directly into your application.

Key Architecture Principles

You own the source code: Installed components do not depend on a runtime package from UI-Package. You maintain all installed files in your repository.
Multi-framework support:
- React: Install with the shadcn command-line interface.
- Vue: Install with the shadcn-vue command-line interface.
- Svelte: Install with the shadcn-svelte command-line interface.
- Angular: Install with the UIPKGE Angular command-line interface (@uipkge/ng).
- Lit: Web Components follow the setup guide in the documentation.
Editable dashboard blocks: Composed dashboard layouts and data views read top-to-bottom so you can modify them easily.

Installation Example

Run the appropriate command to install a component:

# Vue
npx shadcn-vue@latest add https://uipkge.dev/r/vue/button.json

# React
npx shadcn@latest add https://uipkge.dev/r/react/button.json

Starter Boilerplates

Application starter templates are available for Nuxt, Next.js, Angular, and SvelteKit. These templates include optional configurations for authentication, databases, billing, email, and error monitoring. Configure only the services that your project requires.

License and Availability

UI-Package is open-source software distributed under the MIT license. It is free for personal and commercial projects without subscriptions or paid tiers.

Links

Which component or framework do you plan to use for your next project?

62 free, open-source charts for React, Vue, Next.js, and Nuxt

suren_ — Sat, 05 Sep 2026 16:39:30 +0000

Explore the collections: React / Next.js · Vue / Nuxt

A dashboard might start with a line chart and a few bars. Then someone asks why a total changed, where volume drops between stages, or whether an average is hiding a wide spread.

Those questions call for different visualizations. They come up whether you build with React, Next.js, Vue, or Nuxt.

We’ve launched 62 chart components across eight families in UIPKGE, available in separate React and Vue collections. Use the React collection for React and Next.js projects, and the Vue collection for Vue and Nuxt projects.

The collection is free and MIT-licensed, and the component source installs into your project so you can adapt it.

Disclosure: I help build UIPKGE.

Choose the chart around the question

A large collection is most useful when it helps you find the right way to explain your data. Here are a few practical starting points:

Dashboard question	Chart to explore	What it helps show
Why did this total change?	Waterfall	How positive and negative contributions produce the final total
Where does volume go between stages?	Sankey	The size of flows between connected stages
Is an average hiding large differences?	Boxplot or histogram	Spread, concentration, and differences between groups
How do categories contribute to a hierarchy?	Treemap or sunburst	Parts of a total at multiple levels
When do patterns repeat?	Calendar heatmap	Activity across days and longer periods
How did each category change between two points?	Dumbbell or slope	Before-and-after comparisons

The familiar line, bar, area, pie, and scatter charts are there too. A simple chart is often the right choice when it answers the question clearly.

What’s in the collection?

Both catalogs list 62 charts across these eight families:

Cartesian: 28, including line, bar, waterfall, candlestick, and Gantt charts.
Circular: 8, including pie, donut, radar, and gauges.
Hierarchy: 6, including treemap, sunburst, tree, and funnel views.
Flow and network: 5, including Sankey, alluvial, and network graphs.
Distribution: 5, including boxplot, violin, and error-bar charts.
Specialty: 7, including calendar heatmaps, sparklines, and uptime trackers.
Maps: 2, including choropleth and dotted maps.
Custom: a raw-chart wrapper for full ECharts options.

Editable source, with a charting engine underneath

UIPKGE follows a shadcn-style registry workflow: components install into your project tree. You can inspect and change their implementation as your requirements evolve.

Most of the collection wraps Apache ECharts. Several simpler visualizations, including progress rings, waffle charts, and uptime trackers, use SVG or markup without an additional charting dependency.

The distinction matters when choosing a component: installing editable source gives you control over the wrapper, while ECharts remains the rendering dependency for the charts built on it.

Connect charts to the surrounding interface

The collection uses theme tokens such as --chart-1 through --chart-5. ECharts wrappers also use foreground and border tokens, providing a starting point for matching the charts to the rest of your UI.

If a supplied component doesn’t cover your use case, the raw-chart wrapper accepts a full ECharts option object. You can work beyond the preset components when you need more control.

Try it with your own data

Start with the collection that matches your stack:

React and Next.js: browse the React charts.
Vue and Nuxt: browse the Vue charts.

Choose one chart that answers a real question in your application. Open its component page, follow the setup guidance, and replace the example data. Then check the details your users will encounter: long labels, empty datasets, small screens, and the chart’s rendering in your framework setup.

Which chart type do you regularly need but rarely find in UI component collections?

Shipping translations to the edge before your PR merges

suren_ — Tue, 28 Apr 2026 16:26:21 +0000

If your i18n workflow looks like "edit JSON → push → wait → translator returns file → merge → deploy → translations live," you've already lost a day.

I built i18now because that loop felt absurd in 2026. Here's what changed when we flipped it.

The old loop

Dev edits en.json
PR opens, copy gets exported to a TMS
Translators (or LLM jobs) work async
Files come back, get reviewed, merged
Deploy → translations are live

Time-to-live: hours to days. Worse, the source of truth lives in two places (repo + TMS), so drift is inevitable.

The new loop

Dev edits a key in i18now (or pushes from code via SDK)
AI generates translations across locales using your chosen model (BYOK — GPT, Claude, Gemini, etc.)
You review/approve in-context
Translations publish to a CDN edge cache
App fetches them at runtime — no rebuild

Time-to-live: seconds.

How it works under the hood

Edge delivery: Cloudflare CDN serves locale bundles globally with sub-50ms TTFB
BYOK model routing: Pick the model per language or per project — Claude for nuance, Gemini for cost, GPT for fallback
SDKs: Drop-in for Next.js, Nuxt, React, Vue
Runtime fetch + ISR fallback: Translations update without redeploy, but you can pin versions for stability

What this unlocks

Marketing tweaks copy at 11pm? Live in seconds, no eng on-call
New language for a launch? Generate, review, ship in minutes
A/B testing copy? Just version the keys

What I'm still figuring out

Approval workflows for regulated industries (legal, medical)
Translation memory + glossary handoff between AI and human reviewers
Pricing for very high-volume edge fetches

If you've solved any of these in your stack, I'd love to hear how. And if the loop above resonates, give i18now a try — free tier is real, no card required.

Well said

suren_ — Fri, 20 Feb 2026 07:18:30 +0000

Adaka Ankita

Feb 19

Prompting Is Not Engineering: Building Reliable LLM Production Systems with Control Layers

#ai #machinelearning #llm #programming

2 min read