![\"Arcana\"](\"docs/src/assets/arcana-logo-banner-light.png\"){kind=logo}
\n\n \n
\n A typed, shadcn-style component library — 51 components, native for\n Vue 3, React, Angular and Svelte 5,\n sharing one framework-agnostic stylesheet.\n
\n\n\n\n---\n\n## Install\n\n```bash\nnpm install @arcanalabs/ui-components\n```\n\n**No runtime dependencies** — installing the package adds nothing to your bundle.\n\n## Set up\n\nImport the stylesheet once, at the entrypoint of your application:\n\n```ts\nimport \"@arcanalabs/ui-components/styles.css\";\n```\n\nThen import components from the subpath of your framework:\n\n| Framework | Subpath |\n|---|---|\n| Vue 3 | `@arcanalabs/ui-components/vue` |\n| React | `@arcanalabs/ui-components/react` |\n| Angular | `@arcanalabs/ui-components/angular` |\n| Svelte 5 | `@arcanalabs/ui-components/svelte` |\n\nEvery component ships in all four with the same markup, classes and behavior.\n\n## Optional peers\n\nEach of these is an **optional peer dependency**: install it only if it applies to\nyou. Nothing fails at install time when one is missing — the component that needs\nit is the one that requires it.\n\n**Your framework** — install only the one you use (`vue`, `react` + `react-dom`,\n`@angular/core` + `@angular/common`, or `svelte`).\n\n**Icons** — components with an `icon` prop use the Font Awesome Free classes\n(`fa-solid fa-*`):\n\n```bash\nnpm install @fortawesome/fontawesome-free\n```\n\n```ts\nimport \"@fortawesome/fontawesome-free/css/all.min.css\";\n```\n\n**Input masking** — `ArcanaInputMask` masks through\n[`maska`](https://github.com/beholdr/maska), in all four frameworks:\n\n```bash\nnpm install maska\n```\n\nIn Vue only, register the directive once when you create the app:\n\n```ts\napp.use(Maska);\n```\n\n## Usage\n\nThe full catalog — components, props, events, live demos and per-framework code —\nlives in the **[documentation](https://arcana-labs-org.github.io/ui-components/)**,\navailable in 8 languages.\n\nMIT © Arcana Labs\n","readmeFilename":"README.md"}