# Frontend components: licence-checked installs and your own library
Source: https://sovaria.in/docs/frontend-components

Install shadcn/ui, Magic UI, Kibo UI, Sovaria blocks and Watermelon UI components into a frontend with everything they need, or save your own components to your organization's library and reuse them in any of its frontends.

Open a frontend and choose **Components**. Pick a registry, search, open a component to see its licence, the npm packages and files it adds and the items it pulls in, then **Install**. Each install is one new version of the frontend: **Undo** right after, or restore the version before it from History.

| Registry | Licence | What it has |
|---|---|---|
| shadcn/ui (new-york-v4) | MIT | UI primitives (button, dialog, form, calendar…), blocks (sidebars, dashboards, login pages), hooks |
| Magic UI | MIT | Animated components (marquee, globe, number ticker…) |
| Kibo UI | MIT | Composite components (announcement, kanban, gantt…) |
| Sovaria blocks | MIT (from Watermelon UI) | 390 finished sections and screens hosted by Sovaria, each installed and type-checked in the starter: heroes, footers, sign-in, pricing, FAQ, contact, team, error pages, full dashboards and animated components |
| Watermelon UI | MIT | Animated components, blocks and dashboard pieces (cards, disclosures, sliders, widgets…) |
| Your library | Your organization | Components your team saved from its frontends |

Only these registries are fetched, from fixed addresses. Paid or unclear licences are refused: Tailwind UI (Tailwind Plus), Aceternity UI Pro, and Origin UI (moved into coss.com, whose repository is AGPL-3.0).

## What an install changes

- Files go where the template expects them: `src/components/ui` (import from `@/components/ui/<name>`), `src/hooks`, `src/lib`; a block's parts go in `src/components/<block>/` and its page in `src/pages/`.
- Registry import paths are rewritten to those aliases, and `cn` comes from `@/lib/utils`.
- The items a component needs are installed too (up to four levels). A file you already have is kept as you wrote it; if the component you asked for would replace one of your files, the install stops unless you tick **Replace my files**.
- npm packages are added to `package.json` at the exact version current when you install (never a range or `*`); packages you already have keep their version.
- Theme variables are added to `src/index.css` without changing the values you already set; animations and keyframes are added once.
- `sovaria.components.json` records each component: registry, licence, version, files, and what pulled it in.

## Your organization's library

In **Components › Your library**, **Save as component** copies the files you choose (under `src/`) into your organization's library with the npm versions from that frontend's `package.json`. Saving the same name again makes a new version. Any frontend of the same organization can install it; other organizations never see it. Imports of shadcn/ui components it doesn't include (`@/components/ui/button`) are installed from shadcn/ui with it.

## From the CLI and Sovariq

CLI:
```bash
sov fe search "date picker"
sov fe add calendar --frontend shop
sov fe add marquee --registry magicui
sov fe save pricing src/components/pricing.tsx --frontend shop
sov fe add pricing --registry library --frontend landing
sov fe components --frontend shop
```

Sovariq uses the same install: ask it to "add a date picker to the booking page" and it searches the registries, installs the component (in Build mode without a confirmation; undo is in History) and uses it in your page.

> **Limits:** An item is at most 512 KB and 50 files; a library component at most 50 files and 512 KB.

|  | Free | Pro | Ultra | Team | Enterprise |
|---|---|---|---|---|---|
| Components in the organization's reusable library | 10 | 100 | 300 | 500 | 1,000 |