From 462ed32e8949ea96dd09bea327778fd1ad3816c9 Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Tue, 23 Jan 2024 15:47:44 +0100
Subject: [PATCH] minor

---
 packages/libs/react-ui/CONTRIBUTING.md | 12 ++++--------
 packages/libs/react-ui/README.md       |  4 ++--
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/libs/react-ui/CONTRIBUTING.md b/packages/libs/react-ui/CONTRIBUTING.md
index 2faf947a40..8013f6f36b 100644
--- a/packages/libs/react-ui/CONTRIBUTING.md
+++ b/packages/libs/react-ui/CONTRIBUTING.md
@@ -22,7 +22,7 @@ pattern will export multiple subcomponents to compose the compound component.
 A simple example of a component that should use this pattern is the Grid
 component.
 
-```jsx
+```tsx
 <Grid>
   <GridItem>{item1}</GridItem>
   <GridItem>{item2}</GridItem>
@@ -49,7 +49,7 @@ more subcomponents would negatively affect DX.
 > [here](https://bradfrost.com/blog/post/atomic-web-design/) and
 > [here](https://atomicdesign.bradfrost.com/chapter-2/).
 
-##### Button component as an example (Needs to be updated)
+##### Button component as an example
 
 One example of a component that we updated from the Composition to Configuration
 approach was the `Button` component.
@@ -57,7 +57,7 @@ approach was the `Button` component.
 Previously when the `Button` was used with an icon, it needed to be composed
 like this:
 
-```jsx
+```tsx
 <Button.Root>
   Label
   <Button.Icon />
@@ -77,7 +77,7 @@ pattern of the other components, however in usage it caused confusion becuase:
 Now, it has been updated with the configuration approach and can be used in the
 following way:
 
-```jsx
+```tsx
 <Button startIcon="someIcon" loading={false}>
   Label
 </Button>
@@ -234,13 +234,9 @@ any client component files:
 
 Guidelines when styling with VE:
 
-- Classnames should use camel-casing and always have `Class` suffix -
-  `containerClass`
 - You should use `atoms` whenever possible since these are predefined utility
   class. If a style value that you think is commonly used is not available as a
   `atoms`, feel free to add it.
-- If you want to create multiple variations of a components style, use variants.
-  Variants should have a `Variant` suffix - `colorVariant`
 
 ### Selectors
 
diff --git a/packages/libs/react-ui/README.md b/packages/libs/react-ui/README.md
index 5df5e2df8f..eadbc4a956 100644
--- a/packages/libs/react-ui/README.md
+++ b/packages/libs/react-ui/README.md
@@ -91,7 +91,7 @@ utilities that align with the [Kadena Design System][3].
 
 Example for importing and using components:
 
-```ts
+```tsx
 import { Text } from '@kadena/react-ui';
 
 export const Component = () => {
@@ -134,7 +134,7 @@ provider.
 You can use "next-themes" to set this up in Next.js projects by wrapping
 `Component` with the `ThemeProvider` in `__app.tsx`
 
-```js
+```tsx
 import { darkThemeClass } from '@kadena/react-ui';
 import { ThemeProvider } from 'next-themes';