diff --git a/README.md b/README.md
index 1d675c39..ac154fdf 100644
--- a/README.md
+++ b/README.md
@@ -13,11 +13,11 @@ You can find the Storybook with an example for every component in this library [
### How to use Faency
```sh
-npm install @traefiklabs/faency@next
+npm install @traefik-labs/faency@next
# or
-yarn add @traefiklabs/faency@next
+yarn add @traefik-labs/faency@next
```
#### Using Stitches Components (Current)
@@ -27,7 +27,7 @@ Wire up the FaencyProvider which will hold the context with the Theme configurat
> The provider accepts one parameter besides the `children`, which is the `primaryColor`, that will be used to build the colors used on the Theme. This color can be one of the colors exported by the `Stitches` config, just by adding `$` as a prefix, or can be any string that represents a CSS color.
```jsx
-import { FaencyProvider } from '@traefiklabs/faency';
+import { FaencyProvider } from '@traefik-labs/faency';
const App = () => {/* your app */};
```
@@ -35,7 +35,7 @@ const App = () => {/* your app */} (
diff --git a/USER_GUIDE.md b/USER_GUIDE.md
index ec196010..7463b6d1 100644
--- a/USER_GUIDE.md
+++ b/USER_GUIDE.md
@@ -20,10 +20,10 @@ Install Faency via npm or yarn:
```bash
# npm
-npm install @traefiklabs/faency
+npm install @traefik-labs/faency
# yarn
-yarn add @traefiklabs/faency
+yarn add @traefik-labs/faency
```
### Peer Dependencies
@@ -46,8 +46,8 @@ Wrap your application with the `FaencyProvider`:
```tsx
import React from 'react';
-import { FaencyProvider } from '@traefiklabs/faency';
-import { Button, Box, Text } from '@traefiklabs/faency';
+import { FaencyProvider } from '@traefik-labs/faency';
+import { Button, Box, Text } from '@traefik-labs/faency';
function App() {
return (
@@ -69,9 +69,9 @@ For Vanilla Extract components, import the CSS file and use the `VanillaExtractT
```tsx
import React from 'react';
-import '@traefiklabs/faency/dist/style.css'; // Required for Vanilla Extract components
-import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
-import { BoxVanilla, BadgeVanilla } from '@traefiklabs/faency';
+import '@traefik-labs/faency/dist/style.css'; // Required for Vanilla Extract components
+import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
+import { BoxVanilla, BadgeVanilla } from '@traefik-labs/faency';
function App() {
return (
@@ -97,7 +97,7 @@ Stitches components use runtime CSS-in-JS, so no separate CSS imports are needed
Vanilla Extract components require importing the static CSS file. Add this import to your application's entry point (e.g., `App.tsx` or `index.tsx`):
```tsx
-import '@traefiklabs/faency/dist/style.css';
+import '@traefik-labs/faency/dist/style.css';
```
This CSS file contains all the styles for Vanilla Extract components (components with `Vanilla` suffix like `BadgeVanilla`, `BoxVanilla`, etc.). Without this import, these components will render as unstyled elements.
@@ -119,7 +119,7 @@ Faency includes a powerful theming system with support for light/dark modes and
For more control over theming, use the new Vanilla Extract theme provider:
```tsx
-import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
+import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
function App() {
return (
@@ -151,7 +151,7 @@ Faency supports 7 primary color themes:
#### With Vanilla Extract Provider
```tsx
-import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
+import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
function App() {
return (
@@ -167,7 +167,7 @@ function App() {
Access and control the theme using the `useVanillaExtractTheme` hook:
```tsx
-import { useVanillaExtractTheme } from '@traefiklabs/faency';
+import { useVanillaExtractTheme } from '@traefik-labs/faency';
function ThemeToggle() {
const { mode, resolvedTheme, primaryColor, setMode, setPrimaryColor } = useVanillaExtractTheme();
@@ -220,10 +220,10 @@ function ThemeToggle() {
```tsx
// Import individual components
-import { Button, Box, Text, Input, Badge } from '@traefiklabs/faency';
+import { Button, Box, Text, Input, Badge } from '@traefik-labs/faency';
// Or import everything
-import * as Faency from '@traefiklabs/faency';
+import * as Faency from '@traefik-labs/faency';
```
### Basic Component Usage
@@ -231,7 +231,7 @@ import * as Faency from '@traefiklabs/faency';
#### Button
```tsx
-import { Button } from '@traefiklabs/faency';
+import { Button } from '@traefik-labs/faency';