Web component based UI packages for building multilingual, RTL-ready web applications.
JB Design System is a collection of focused UI packages. Each component ships as a standards-based web component, and most components also include a React wrapper. Teams can install only the packages they need instead of adopting one large all-in-one bundle.
- 🧩 Framework friendly: use the web components in React, Vue, Angular, Svelte, vanilla JavaScript, or any stack that can render custom elements.
- ⚛️ React ready: install the same package and import from
package-name/reactwhen you want typed React components. - 📝 Form focused: inputs, pickers, validation, form collection, and high-interaction controls are treated as first-class product UI.
- 🌐 RTL and Persian ready: locale, direction, Persian calendar, and Persian number support are built into the system instead of patched on per app.
- 🎨 Themeable by design: components expose CSS custom properties, parts, and states so applications can style them without forking internals.
- 📦 Small by choice: packages are independent, so product teams can adopt gradually.
Explore the live documentation and examples:
Install the package that matches the UI you need.
npm install jb-inputUse it as a web component:
import "jb-input";<jb-input label="First name" name="firstName"></jb-input>Or use its React wrapper:
import { JBInput } from "jb-input/react";
export function ProfileForm() {
return <JBInput label="First name" name="firstName" />;
}Start with the package closest to the user task:
| Need | Packages |
|---|---|
| Text, number, mobile, password, payment, national ID, textarea, PIN, date, or time entry | jb-input, jb-number-input, jb-mobile-input, jb-password-input, jb-payment-input, jb-national-input, jb-textarea, jb-pin-input, jb-date-input, jb-time-input |
| Selection and boolean choices | jb-select, jb-checkbox, jb-switch |
| Files, images, calendar, and time picking | jb-file-input, jb-image-input, jb-calendar, jb-time-picker |
| Validation and form value collection | jb-validation, jb-form |
| Overlays and feedback | jb-modal, jb-popover, jb-tooltip, jb-notification, jb-loading |
| Data and utility UI | jb-grid, jb-searchbar, jb-infinite-scroll, jb-qrcode |
See the full component list for package links.
Most form controls support labels, messages, validation, disabled states, CSS customization, and native form participation.
import { JBForm } from "jb-form/react";
import { JBInput } from "jb-input/react";
import { JBMobileInput } from "jb-mobile-input/react";
import { JBButton } from "jb-button/react";
export function SignupForm() {
return (
<JBForm onSubmit={(event) => console.log(event.target.value)}>
<JBInput name="fullName" label="Full name" required />
<JBMobileInput name="mobile" label="Mobile number" required />
<JBButton type="submit">Create account</JBButton>
</JBForm>
);
}Set theme variables in any scope that should own the visual style.
:root {
--jb-primary: oklch(54% 0.18 250);
--jb-input-border-radius: 0.5rem;
}Set document language and direction once at the application shell.
<html lang="fa" dir="rtl"></html>For advanced locale control, use jb-core/i18n.
import { i18n } from "jb-core/i18n";
i18n.setLocale(new Intl.Locale("fa", {
calendar: "persian",
numberingSystem: "arabext",
}));This repository is the monorepo used to manage, test, document, and build the component packages. The packages live in modules/, mostly as Git submodules.
Clone with submodules:
git clone --recurse-submodules -j8 https://github.com/javadbat/design-system.gitIf you already cloned the repository:
git submodule update --init --recursiveInstall dependencies:
deno installBuild packages:
# Build every package
deno task build
# Build one package by its exact module name
deno task build --name=jb-input
# Build every package whose module name matches a glob pattern
deno task build --name="jb-icon*"
# Glob patterns can also be used in watch mode
deno task build --name="jb-icon*" --watch
# Watch one package
deno task build --name=jb-input --watchThe --name option accepts glob patterns such as * and ?. When a pattern
matches both implementations, all matching web components are built first,
followed by all matching React components.
Start Storybook:
deno task startRun checks:
deno task testUse the local contribution guide or the Storybook contribution guide before changing package behavior, docs, or build tooling.
Add a component submodule:
git submodule add -f https://github.com/user/repo.git modules/module-nameRemove a component submodule:
git rm modules/module-name