updated doc

README.md

@@ -75,6 +75,20 @@ const App = () => {
 };
 ```
 
+## The `as` attribute
+
+The Box Component is the primitive component that allows you to access the sx property. By default it renders a div html element.  
+It accepts a `as` attribute to choose the needed tag.
+
+```javascript
+<Box as="a" href="#" sx={{ color: '$primary' }}>
+  My link
+</Box>
+```
+
+> Of course, the href attribute type is well inferred from the "`a`" tag.  
+> And it works for all tags and Components !
+
 ## Reusable components
 
 Components often need to be reusable and easily customisable with the sx property overriding.  

packages/lib/README.md

@@ -1,4 +1,5 @@
-# Sx-machine
+<h1 align="center">Sx-machine</h1>
+<p align="center">First class Sx property for React.</p>
 
 ## Sx-machine is a lightweight library that provides a Box component for React and its themed SX property.
 
@@ -74,6 +75,20 @@ const App = () => {
 };
 ```
 
+## The `as` attribute
+
+The Box Component is the primitive component that allows you to access the sx property. By default it renders a div html element.  
+It accepts a `as` attribute to choose the needed tag.
+
+```javascript
+<Box as="a" href="#" sx={{ color: '$primary' }}>
+  My link
+</Box>
+```
+
+> Of course, the href attribute type is well inferred from the "`a`" tag.  
+> And it works for all tags and Components !
+
 ## Reusable components
 
 Components often need to be reusable and easily customisable with the sx property overriding.  

packages/lib/package.json

@@ -6,7 +6,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "packageManager": "[email protected]",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "scripts": {
     "dev": "run-p --continue-on-error watch:source watch:types",
     "watch:types": "npx tsc -w",