Update README and EXAMPLES

SAKANA7 · Oct 25, 2022 · bd3bcfe · bd3bcfe
1 parent 0df2837
commit bd3bcfe
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 1 deletion.
diff --git a/EXAMPLES.md b/EXAMPLES.md
@@ -1,7 +1,9 @@
 # Take a look at some of examples using [Sagu-UI](https://www.npmjs.com/package/sagu-ui)
 
-- [`basic open/close form`](https://codesandbox.io/s/sagu-ui-example-r22mum?file=/src/App.js)
+- [`Basic open/close form`](https://codesandbox.io/s/sagu-ui-example-r22mum?file=/src/App.js)
 - [`Counter App`](https://codesandbox.io/s/sagu-ui-example-by-yash6318-9g3i3d?file=/src/App.js)
 - [`Timer`](https://codesandbox.io/s/sagu-ui-example-by-shailendra-singh-nj5ksm?file=/src/App.js)
 - [`Product Card Listing`](https://codesandbox.io/s/sagu-ui-example-by-sai-karthik-md1sbc?file=/src/App.js)
 - [`Todo App`](https://codesandbox.io/s/sagu-ui-example-by-amit-imgw1f)
+- [`Theme customization`](https://codesandbox.io/s/sagu-ui-theme-customization-2yhe9g?file=/src/App.tsx)
+- [`Component customization`](https://codesandbox.io/s/sagu-ui-component-customization-wk1whk?file=/src/App.tsx)
diff --git a/README.md b/README.md
@@ -38,6 +38,71 @@ function App() {
 export default App
 ```
 
+## Theme customization
+
+You can easily override the values of the theme object
+
+```js
+function App() {
+  const customTheme = Object.assign(theme)
+
+  customTheme.colors.primary.medium = '#510763'
+
+  return <SaguProvider theme={customTheme}>...</SaguProvider>
+}
+```
+
+## Component customization
+
+You have to many ways to customize the Sagu components
+
+**Using styled-components**
+
+```js
+import styled from 'styled-components'
+import { Button } from 'sagu-ui'
+
+const MyCustomButton = styled(Button)`
+  background: red;
+`
+...
+
+<MyCustomButton>My Button</MyCustomButton>
+```
+
+**Using inline styles**
+
+```js
+import { Button } from 'sagu-ui'
+
+...
+
+<Button
+  style={{
+    background: 'yellow'
+  }}
+>
+  My Button
+</Button>
+```
+
+**Using CSS classes**
+
+```css
+.button-green {
+  background: green;
+}
+```
+
+```js
+import { Button } from 'sagu-ui'
+import './styles.css'
+
+...
+
+<Button className="button-green">My Button</Button>
+```
+
 Take a look at some [examples](./EXAMPLES.md) using [Sagu-UI](https://www.npmjs.com/package/sagu-ui)
 
 ## Contributing