# Appica UI: a React component library with a matching Figma file > Appica UI ships 70+ themeable, WAI-ARIA-oriented React components from a pnpm monorepo, with a free Figma file built on the same design tokens. The React package is the only one published so far, and the docs live off-repo. **appica-dev/appica-ui** — A beautifully styled UI component library for building accessible, modern web applications and scalable design systems. - Repository: https://github.com/appica-dev/appica-ui - Website: https://appica.dev/ui - Stars: 495 · Forks: 33 - Language: TypeScript - License: MIT - Published: 2026-09-17 · Updated: 2026-09-17 · Language: en - Canonical page: https://hysenlabs.com/projects/appica-dev-appica-ui ## What Appica UI covers that a bare component library does not Most React component libraries stop at code. Appica UI pairs the code with a free Figma design file that the README says is mirrored one-to-one with the components: variants, sizes and states, built on the same design tokens. That is the actual pitch. A designer changes a token in Figma, and the developer consuming @appica/ui-react works from the same vocabulary rather than re-deriving spacing and color by eye. The target reader is a team building a design system, or a product team that wants one. The README names AI-powered apps, SaaS dashboards and e-commerce sites as the intended surfaces, which mostly tells you the component count is broad rather than deep in any single vertical. The repository topics confirm the emphasis: a11y, WAI-ARIA, dark-mode, rtl, tailwindcss, base-ui. If your product ships in a right-to-left locale, that topic list is the reason to look here before looking at a library that treats RTL as an afterthought. The scope is deliberately narrow in one direction. This is a monorepo where framework-specific packages live under packages/ and are published to npm independently, and right now the packages table lists exactly one: @appica/ui-react. So the design-token story is framework-agnostic in principle, but the code story is React-only today. ## How the monorepo is wired and where the components actually live The repository layout is a standard pnpm workspace. The root package.json is marked "private": true, so it is a build orchestrator rather than a published artifact. Its scripts fan out to workspace packages with pnpm --filter and pnpm -r, which is why dev, build, lint, typecheck and test all resolve to per-package commands rather than root-level tooling. The interesting script is sync-exports:check. It runs a script inside the React package, node scripts/sync-exports.mjs --check, which implies the package generates or validates its export map rather than maintaining it by hand. That is a real mechanism: an export map that drifts from the built files breaks deep imports silently, and a check script is the cheap way to catch it. If you fork the library or add a component, that script is the gate you want in CI. Styling is Tailwind-based, per the repository topics, and the root devDependencies include prettier-plugin-tailwindcss, which sorts Tailwind classes during formatting. TypeScript is pinned at ^6.0.3 in devDependencies, so the codebase is built against a TypeScript major that most projects are not on yet. That matters if you plan to patch the library locally: your editor and your build need to agree on the compiler version. There is also a playgrounds/ directory and a playground script, pnpm --filter playground-react dev, which is how a contributor exercises components in a running app instead of in isolation. The README points contributors at CONTRIBUTING.md for the development setup and workflow rather than documenting it inline. ## Installing @appica/ui-react and rendering a first component The README does not carry install steps. It points to the documentation site, specifically appica.dev/ui/docs/react/installation, for the React package. Treat that page as the source of truth, because anything below is inferred from the repository metadata rather than copied from a setup guide. The package is published to npm independently under the name @appica/ui-react, and the current release line is 1.1.0, published on 2026-08-11. A conventional install looks like this: ```bash npm install @appica/ui-react ``` If you work in the monorepo itself rather than consuming the package, the root package.json declares the toolchain requirements. Node must be 22.0.0 or newer and pnpm 9.0.0 or newer, and the declared packageManager is pnpm@11.8.0. ```bash corepack enable pnpm install pnpm build ``` pnpm install resolves the workspace from pnpm-workspace.yaml, and pnpm build runs the build script across every package with pnpm -r build. To see components running rather than compiled, the playground script starts the React playground: ```bash pnpm playground ``` What you should see after that is the playground app in your browser with the component set mounted. The README does not state a port for it, so read the terminal output rather than assuming one. Theming is the part to read the docs for. The README claims full theming and dark mode out of the box, and the topics list dark-mode and tailwindcss, but the token names, the CSS variable surface and the dark-mode toggle mechanism are documented at appica.dev/ui rather than in the repository README. Do not guess at token names from the Figma file alone; the Figma-to-code mapping is described as one-to-one, which cuts both ways if you rename things on the design side. ## The React-only constraint and other places this library will not fit The packages table is the honest limitation. It lists one row: @appica/ui-react. If your application is Vue, Svelte, Angular or plain server-rendered HTML, there is nothing here to install today. The monorepo structure suggests more packages are planned, but the README does not commit to a framework roadmap, and planning around an unannounced package is not planning. Version maturity is the second constraint. The release history given here starts at 1.0.0 on 2026-07-09 and moves to 1.1.0 on 2026-08-11. That is a young 1.x line. The README does not document rollback, and it does not describe a migration path between major versions, which is normal for a library this new but still means you are adopting something whose breaking-change policy is unwritten. Third, the documentation is off-repo. The README is a signpost: it links to appica.dev/ui for full documentation, component demos and theming guides, and to CONTRIBUTING.md for development setup. That is a reasonable choice for a commercial-adjacent project, but it means the repository alone is not enough to evaluate the library. If your team reviews dependencies by reading source and READMEs in a vendored mirror, you will be reading the docs site separately. Finally, the accessibility claim is a direction, not a certification. The topics include a11y and WAI-ARIA, and the description says accessible, but the README does not name an audit, a conformance level or a testing tool. Verify against your own assistive-technology matrix before you repeat the claim to a procurement team. ## Appica UI against shadcn/ui and Base UI The closest comparison in practice is shadcn/ui. The difference is distribution model. shadcn/ui copies component source into your repository, so you own and can edit every line, and upgrades are manual merges you control. Appica UI is a published npm package, @appica/ui-react, which means upgrades arrive through your package manager and you customize through the theming surface rather than by editing the component. If your team wants to own the component internals, that is a real reason to prefer the copy-in model. If you would rather not maintain a forked component tree, the package model is less work. Base UI is a different comparison and the repository topics name it directly. Base UI provides unstyled primitives with the behavior and accessibility wiring handled, leaving visual design to you. Appica UI sits one layer above that: it is styled and themed, and the README's claim is about polished interactions and full theming out of the box. Choosing between them is choosing how much visual opinion you want to inherit. If your design system is already defined and you need behavior only, primitives are the smaller dependency. If you want a default look that a designer can match in Figma, the styled layer is the point. The Figma file is where Appica UI is hardest to substitute. A free Figma community file whose variants mirror the code, built on the same tokens, is a specific artifact. Neither of the alternatives above ships that as part of the same offering. ## Licence terms and what upgrading costs you Appica UI is MIT licensed, copyright Appica. The README states it is free to use in personal and commercial projects. MIT is permissive: you can use, modify and redistribute the code, including in closed-source products, provided the copyright notice and licence text are preserved. That is the standard reading, not legal advice, and if your organization has a policy on attribution notices you should route the LICENSE file through it rather than assuming. The licence question that MIT does not answer is the Figma file. The README describes it as a free Figma design file and links to the Figma Community listing, but it does not state a licence for the design assets separately from the code. If your designers intend to modify and redistribute the file, confirm the terms on the Figma listing itself. Upgrade cost is the other number to estimate. The release history here spans 1.0.0 to 1.1.0, a minor bump, and the package has a CHANGELOG.md under packages/react. That changelog is where you should look before bumping, because the README does not document rollback or a migration policy. Because the package is published independently, a version bump is a normal dependency update, and because the export map is validated by sync-exports:check, deep imports are the surface most likely to move between versions. If you import from the package root only, your exposure is smaller. The maintenance signal available here is the last push, on 2026-08-12, and the 1.1.0 release the day before. Those are recent. What the repository does not give you is a stated support window or a deprecation policy, so treat the CHANGELOG as your only upgrade contract. ## Conclusion Adopt @appica/ui-react if you are building a React app and want a component set whose Figma file and code share design tokens, and you are comfortable reading the installation guide at appica.dev/ui/docs/react/installation because the repository README does not carry setup steps. Do not adopt it if you need Vue, Svelte or Angular components today, since the packages table lists only @appica/ui-react, or if you require a documented upgrade path, since the README does not document rollback or migration between major versions. Before committing, verify the export surface with pnpm sync-exports:check and confirm that your Node and pnpm versions satisfy the engines field: Node >=22.0.0 and pnpm >=9.0.0. ## FAQ ### What is an app UI? In this context it means the interface layer of an application: the buttons, inputs, dialogs and layout primitives that users interact with. Appica UI packages that layer as a React component library, @appica/ui-react, with 70+ themeable components aimed at apps, dashboards and design systems. ### Is Appica UI free to use in commercial projects? The README states the project is MIT licensed and free to use in personal and commercial projects. MIT requires that the copyright notice and licence text be preserved. The README does not state a separate licence for the Figma design file, so check the Figma listing for that. ### Which frameworks does Appica UI support? The packages table in the README lists only @appica/ui-react. The monorepo is structured so framework-specific packages live under packages/ and publish to npm independently, but no other package is listed yet. ### What Node and pnpm versions does the Appica UI repository require? The root package.json declares engines of Node >=22.0.0 and pnpm >=9.0.0, with packageManager set to pnpm@11.8.0. Those apply to working in the monorepo, not necessarily to consuming the published package. ## Sources - [appica-dev/appica-ui on GitHub](https://github.com/appica-dev/appica-ui) - [License: MIT](https://github.com/appica-dev/appica-ui/blob/main/LICENSE) - [Project website](https://appica.dev/ui) - [README](https://github.com/appica-dev/appica-ui/blob/main/README.md) - [Releases](https://github.com/appica-dev/appica-ui/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/appica-dev-appica-ui