Update Docs + Use Theme component (#1058)

Author: kotAPI

docs/app/docs/components/switch/page.mdx

@@ -9,7 +9,7 @@ import codeUsage, { SwitchTable } from "./docs/codeUsage"
 
 
 <Documentation  title='Switch' description={`
-            Switch is used to toggle between two states on and off. You can commonly used in settings panel, forms and any other 
+            Switch is used to toggle between two states on and off. It is commonly used in settings panel, forms and any other 
             place where a user needs to enable or disable feature.
             `}>
             <Documentation.ComponentHero codeUsage={codeUsage}>

docs/app/docs/contributing/setting-up-dev-environment/page.mdx

@@ -12,7 +12,7 @@ Follow these steps to set up your development environment:
 npm install
 ```
 
- in the root directory. We use npm to maintain consistency in our dependencies.
+in the root directory. We use npm to maintain consistency in our dependencies.
 
 ## Understanding the code structure
 
@@ -35,7 +35,7 @@ To start Storybook, run
 npm run sb
 ```
 
- in the root directory.
+in the root directory.
 
 ## Running the Documentation Website Dev Server
 

docs/app/docs/first-steps/introduction/page.mdx

@@ -7,7 +7,7 @@ export const metadata = {
 
 Welcome to Rad UI, an open-source UI library designed to prioritize speed while providing room for growth and customization. Rad UI offers unstyled, composable primitives that give you full control over styling and behavior.
 
-The library is built on proven design systems, ensuring that your product not only looks great but also provides a reliable user experience. Join developers around the world who are using Rad UI to build their products faster. Superpower your product with great user experience and developer experience.
+The library is built on proven design systems, ensuring that your product not only looks great but also provides a reliable user experience. Join developers around the world who are using Rad UI to build their products faster.
 
 ## Why Rad UI?
 
@@ -30,7 +30,7 @@ Engineered for high performance with a minimal footprint, ensuring fast load tim
 Built with a developer-first approach, featuring intuitive APIs, first-class TypeScript support, and detailed documentation. Rad UI makes it easy to get started while offering the flexibility to extend components as needed.
 
 ### Customizable
-Fully adaptable to your preferred styling approach, whether it’s Tailwind CSS, SCSS, or any other method. Rad UI gives you complete control over aesthetics without enforcing a predefined look and feel.
+Fully adaptable to your preferred styling approach, whether it's Tailwind CSS, SCSS, or any other method. Rad UI gives you complete control over aesthetics without enforcing a predefined look and feel.
 
 
 ## Who is Rad UI for?

docs/app/docs/first-steps/usage/page.mdx

@@ -1,7 +1,7 @@
 # Usage
 
 ## Importing components
-
+To use Rad UI components, you need to import them from the "@radui/ui" package.
 
 ```tsx
 import Button from "@radui/ui/Button";
@@ -25,8 +25,28 @@ Rad UI is headless out of the box, meaning it doesn't come with any styles. But
 import "@radui/ui/themes/default.css";
 ```
 
-# Tailwind presets
-Rad UI also provides fist class support for Tailwind CSS. You can import the preset and have access to Rad UI's design system tokens in your Tailwind CSS.
+
+## Configuring the theme
+Rad UI ships a theme component that you can use to configure all your global app preferences in a single place.
+
+```tsx
+import Theme from "@radui/ui/Theme";
+
+const App = () => {
+    return (
+        <Theme appearance="dark" accentColor="gray">
+            <App />
+        </Theme>
+    )
+}
+```
+
+
+
+## Tailwind presets
+Rad UI also provides first class support for Tailwind CSS. You can import the preset and have access to Rad UI's design system tokens in your Tailwind CSS.
+
+### For Tailwind CSS v3
 
 ```tsx
  // tailwind.config.js
@@ -44,7 +64,9 @@ const config = {
 export default config;
 ```
 
+### For Tailwind CSS v4
 
+We are actively working on a Tailwind CSS v4 preset so you can use the latest and greatest from Tailwind CSS with minimal configuration.
 
 
 

docs/app/docs/guides/accessibility/page.mdx

@@ -1,31 +1,31 @@
-# Accessibility  
+# Accessibility
 
-Rad UI is built to bridge the gap between design and development by prioritizing accessibility. Our components are designed to be accessible by default, ensuring an inclusive experience for all users. We've taken care of the accessibility concerns so you don’t have to—Rad UI is tested across a wide range of devices and screen readers.  
+Rad UI is built to bridge the gap between design and development by prioritizing accessibility. Our components are designed to be accessible by default, ensuring an inclusive experience for all users. We've taken care of the accessibility concerns so you don't have to—Rad UI is tested across a wide range of devices and screen readers.
 
-Accessibility improvements are an ongoing effort, and we’re committed to making Rad UI even better. If you encounter any accessibility issues, please report them on our [GitHub repository](#).  
+Accessibility improvements are an ongoing effort, and we're committed to making Rad UI even better. If you encounter any accessibility issues, please report them on our [GitHub repository](#).
 
 ---
 
-## WAI-ARIA Compliance  
+## WAI-ARIA Compliance
 
-Rad UI adheres to the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) guidelines to enhance accessibility for users with disabilities. We continuously refine our implementation to ensure that Rad UI components follow best practices for screen readers and assistive technologies.  
+Rad UI adheres to the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) guidelines to enhance accessibility for users with disabilities. We continuously refine our implementation to ensure that Rad UI components follow best practices for screen readers and assistive technologies.
 
 ---
 
-## Keyboard Navigation  
+## Keyboard Navigation
 
-Rad UI components are fully keyboard accessible. You can navigate through components using the **Tab** key and interact with them using keyboard-friendly controls like **Arrow Keys, Enter, and Space**.  
+Rad UI components are fully keyboard accessible. You can navigate through components using the **Tab** key and interact with them using keyboard-friendly controls like **Arrow Keys, Enter, and Space**.
 
-Currently, full keyboard support is in beta, with more components being enhanced over time. If you have suggestions or encounter issues, let us know!  
+Currently, full keyboard support is in beta, with more components being enhanced over time. If you have suggestions or encounter issues, let us know!
 
 ---
 
-## Customization: Bring Your Own Styles  
+## Customization: Bring Your Own Styles
 
-Rad UI is designed with flexibility in mind, allowing you to fully customize components to match your design system. You can style components using:  
+Rad UI is designed with flexibility in mind, allowing you to fully customize components to match your design system. You can style components using:
 
-- **CSS** (global styles or CSS modules)  
-- **Tailwind CSS** (utility-first classes)  
-- **Inline styles** (JavaScript-controlled styling)  
+- **CSS** (global styles or CSS modules)
+- **Tailwind CSS** (utility-first classes)
+- **Inline styles** (JavaScript-controlled styling)
 
-While we provide a **default theme**, it’s completely optional—you can modify it or override it entirely to suit your needs.  
+While we provide a **default theme**, it's completely optional—you can modify it or override it entirely to suit your needs.

docs/components/Main/Main.js

@@ -1,12 +1,14 @@
 'use client';
-import Theme from '@/components/layout/Theme';
+
 import { useCallback, useState } from 'react';
 import Button from '@radui/ui/Button';
 import { parseCookies, setCookie } from 'nookies';
 import { NavBarContext } from '@/components/Main/NavBar/NavBarContext';
 
 import NavBar from './NavBar';
 
+import Theme from '@radui/ui/Theme';
+
 
 
 const MainLayout = ({ darkModeSsrValue, children }) => {
@@ -21,17 +23,20 @@ const MainLayout = ({ darkModeSsrValue, children }) => {
 
 
     return (
-        <Theme isDark={darkMode} >
-                <NavBarContext.Provider value={sendValues}>
+        <Theme
+            appearance={darkMode ? 'dark' : 'light'}
+            accentColor="gray"
+        >
+            <NavBarContext.Provider value={sendValues}>
                 <div className={`flex flex-col flex-1 h-screen ${darkMode ? 'rad-ui-dark-theme bg-black' : ''}`} data-accent-color="gray">
                     {/* Navbar start */}
-                <NavBar cookies={cookies} darkMode={darkMode} setDarkMode={setDarkMode} setCookie={setCookie} />
-                {/* Navbar end */}
-                <>
-                    {children}
-                </>
-            </div>
-                </NavBarContext.Provider>
+                    <NavBar cookies={cookies} darkMode={darkMode} setDarkMode={setDarkMode} setCookie={setCookie} />
+                    {/* Navbar end */}
+                    <>
+                        {children}
+                    </>
+                </div>
+            </NavBarContext.Provider>
 
 
         </Theme>

docs/mdx-components.tsx

@@ -2,36 +2,39 @@ import type { MDXComponents } from 'mdx/types'
 
 import Heading from "@radui/ui/Heading"
 import Text from "@radui/ui/Text"
+import Strong from "@radui/ui/Strong"
 
 import Documentation from '@/components/layout/Documentation/Documentation';
 
+
+const headingColorClasses = "text-gray-1000"
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
      // Allows customizing built-in components, e.g. to add styling.
      h1: ({ children }) => (
-      <Heading as="h1" className="text-gray-1000 mb-4" >{children}</Heading>
+      <Heading as="h1" className={`${headingColorClasses} mb-4`} >{children}</Heading>
     ),
     h2: ({ children }) => (
-      <Heading as="h2" className="text-gray-1000 mb-4" >{children}</Heading>
+      <Heading as="h2" className={`${headingColorClasses} mt-8 mb-4`} >{children}</Heading>
     ),
     h3: ({ children }) => (
-      <Heading as="h3" className="text-gray-1000 mb-4" >{children}</Heading>
+      <Heading as="h3" className={`${headingColorClasses} mb-4 my-8`} >{children}</Heading>
     ),
     h4: ({ children }) => (
-      <Heading as="h4" className="text-gray-1000 mb-4" >{children}</Heading>
+      <Heading as="h4" className={`${headingColorClasses} mb-4 mt-8`} >{children}</Heading>
     ),
     h5: ({ children }) => (
-      <Heading as="h5" className="text-gray-1000 mb-4" >{children}</Heading>
+      <Heading as="h5" className={`${headingColorClasses} mb-4 mt-8`} >{children}</Heading>
     ),
     h6: ({ children }) => (
-      <Heading as="h6" className="text-gray-1000 mb-4" >{children}</Heading>
+      <Heading as="h6" className={`${headingColorClasses} mb-4 mt-8`} >{children}</Heading>
     ),
     p: ({ children }) => (
-      <Text className="text-gray-950 mb-4" >{children}</Text>
+      <Text className="text-gray-1000 mb-4 font-light" >{children}</Text>
     ),
     strong: ({ children }) => (
-      <Text className="text-gray-1000 inline-block font-bold" >{children}</Text>
+      <Strong>{children}</Strong>
     ),
     code: ({ children }) => (
       <Documentation.CodeBlock inline>

docs/package-lock.json

@@ -13,7 +13,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.2.0",
-    "@radui/ui": "^0.0.37",
+    "@radui/ui": "^0.0.38",
     "@types/mdx": "^2.0.13",
     "@types/node": "20.5.9",
     "@types/react": "19.0.2",
@@ -43,4 +43,4 @@
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2"
   }
-}
+}

docs/package.json

@@ -8,6 +8,7 @@ const config: Config = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./mdx-components.tsx"
   ],
 
   theme: {