refactor: update and optimize UX on web (#325)

apps/web/app/docs/[[...slug]]/page.tsx

@@ -87,7 +87,7 @@ export default async function DocPage({ params }: DocPageProps) {
       <div className="mx-auto w-full min-w-0">
         <DocsPageHeader heading={doc.title} text={doc.description} />
         <Mdx code={doc.body.code} />
-        <hr className="my-4 md:my-6" />
+        <hr className="my-4 md:my-6 border-default" />
         <DocsPager doc={doc} />
         <footer className="mt-10 pl-4 flex justify-end">
           <Link href="https://github.com/OpenLab-dev/openui" target="_blank">

apps/web/app/faq/page.tsx

@@ -20,7 +20,7 @@ export default function PageFAQ() {
       <section className="w-full py-12 md:py-20 container mx-auto">
         <Accordion type="single" collapsible className="w-full">
           {FAQs.map((faq, index) => (
-            <AccordionItem key={index} value={`item-${index}`} ripple shadow="md" className="mt-6">
+            <AccordionItem key={index} value={`item-${index}`} ripple shadow="sm" className="mt-6">
               <AccordionTrigger text="lg">
                 {faq.question}
               </AccordionTrigger>

apps/web/components/callout.tsx

@@ -14,7 +14,7 @@ export function Callout({
 }: CalloutProps) {
   return (
     <div
-      className={cn('my-6 flex items-start rounded-md border border-l-4 p-4', {
+      className={cn('my-6 flex items-start rounded-md border border-l-4 p-4 border-default', {
         'border-red-900 bg-red-50': type === 'danger',
         'border-yellow-900 bg-yellow-50': type === 'warning',
       })}

apps/web/components/commons.tsx

@@ -55,7 +55,7 @@ export default function Commons() {
       <div className="container px-4 md:px-6">
         <div className="flex flex-col items-center justify-center space-y-8 text-center">
           <div className="space-y-2">
-            <Badge color="none" outline="primary">
+            <Badge color="none" outline="success">
               Key components 👋
             </Badge>
             <Title>
@@ -68,7 +68,7 @@ export default function Commons() {
           <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:gap-8">
             {cards.map((card, i) => (
               <Link key={i} href={card.path}>
-                <Card className="cursor-pointer hover:scale-105 transition-all h-full hover:bg-default hover:shadow-md" shadow="none" border="sm" ripple>
+                <Card className="cursor-pointer hover:scale-105 transition-all h-full bg-default shadow" shadow="none" border="sm" ripple>
                   <CardHeader>
                     <card.Icon className="size-8" />
                   </CardHeader>

apps/web/components/dark-mode.tsx

@@ -17,7 +17,7 @@ export function DarkMode() {
   return (
     <Dropdown>
       <DropdownTrigger asChild>
-        <Button className="bg-transparent border border-default hover:bg-default/80" ripple shadow="none">
+        <Button color="ghost" size="icon">
           <Sun className="h-[1.2rem] w-[1.2rem] text-foreground rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

apps/web/components/docs-search.tsx

@@ -27,7 +27,7 @@ export function DocsSearch({ className, ...props }: DocsSearchProps) {
       <Input
         type="search"
         placeholder="Search..."
-        className="rounded-large py-0 relative border"
+        className="rounded-large py-0 relative bg-default shadow border-0"
       />
       <Search className="absolute right-0 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground" />
     </form>

apps/web/components/faq.tsx

@@ -13,7 +13,7 @@ export default function FAQ() {
           </p>
         </div>
         <div className="mx-auto w-full max-w-sm space-y-2">
-          <a className="inline-flex h-12 animate-shimmer items-center justify-center rounded-md border border-default px-6 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 w-full hover:bg-default/10" href="mailto:castrogarcia.mjs@gmail.com">
+          <a className="inline-flex h-12 animate-shimmer items-center justify-center rounded-md border border-default px-6 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 w-full bg-default hover:bg-default/80 shadow" href="mailto:castrogarcia.mjs@gmail.com">
             <div className="flex items-center gap-3">
               <p className="text-lg">Say Hello</p>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">

apps/web/components/home.tsx

@@ -5,7 +5,7 @@ export default function Home() {
   return (
     <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
       <div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
-        <Badge color="none" outline="primary">Open UI is available 🎉</Badge>
+        <Badge color="none" outline="success">Open UI is available 🎉</Badge>
         <h1 className="text-4xl md:text-5xl font-bold text-center dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-neutral-50 dark:to-neutral-400 dark:bg-opacity-50">
           Open UI. A modern design system built with Shadcn UI and Tailwind CSS.
         </h1>
@@ -16,7 +16,7 @@ export default function Home() {
           <Button asChild color="primary" size="lg" className="bg-default hover:bg-default/80 text-foreground" rippleColor="light">
             <Link href="/docs">Get Started</Link>
           </Button>
-          <Button asChild color="ghost" size="lg" className="border border-default hover:bg-default/10">
+          <Button asChild color="ghost" size="lg" className="border shadow border-default hover:bg-default/50">
             <Link href="/https://github.com/OpenLab-dev" target="_blank">Github</Link>
           </Button>
         </div>

apps/web/components/mdx-card.tsx

@@ -10,7 +10,7 @@ export function MdxCard({ href, className, children, disabled, ...props }: CardP
   return (
     <div
       className={cn(
-        'group relative rounded-lg border p-6 shadow-md transition-shadow hover:shadow-lg',
+        'group relative rounded-lg border p-6 shadow-medium transition-shadow hover:shadow-lg',
         disabled && 'cursor-not-allowed opacity-60',
         className,
       )}

apps/web/components/mdx-components.tsx

@@ -1,7 +1,3 @@
-// eslint-disable-next-line ts/ban-ts-comment
-// @ts-nocheck
-// TODO: Fix this when we turn strict mode on.
-
 'use client'
 
 import * as React from 'react'
@@ -14,7 +10,7 @@ import { Callout } from '@/components/callout'
 import { MdxCard } from '@/components/mdx-card'
 
 const components = {
-  h1: ({ className, ...props }) => (
+  h1: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <h1
       className={cn(
         'mt-2 scroll-m-20 text-4xl font-bold tracking-tight',
@@ -23,16 +19,16 @@ const components = {
       {...props}
     />
   ),
-  h2: ({ className, ...props }) => (
+  h2: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <h2
       className={cn(
-        'mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0',
+        'mt-10 scroll-m-20 border-b border-default pb-1 text-3xl font-semibold tracking-tight first:mt-0',
         className,
       )}
       {...props}
     />
   ),
-  h3: ({ className, ...props }) => (
+  h3: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <h3
       className={cn(
         'mt-8 scroll-m-20 text-2xl font-semibold tracking-tight',
@@ -41,7 +37,7 @@ const components = {
       {...props}
     />
   ),
-  h4: ({ className, ...props }) => (
+  h4: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <h4
       className={cn(
         'mt-8 scroll-m-20 text-xl font-semibold tracking-tight',
@@ -50,7 +46,7 @@ const components = {
       {...props}
     />
   ),
-  h5: ({ className, ...props }) => (
+  h5: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <h5
       className={cn(
         'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',
@@ -59,7 +55,7 @@ const components = {
       {...props}
     />
   ),
-  h6: ({ className, ...props }) => (
+  h6: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <h6
       className={cn(
         'mt-8 scroll-m-20 text-base font-semibold tracking-tight',
@@ -68,34 +64,34 @@ const components = {
       {...props}
     />
   ),
-  div: ({ className, ...props }) => (
+  div: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <div className={cn('mt-6', className)} {...props} />
   ),
-  a: ({ className, ...props }) => (
+  a: ({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
     <a
       className={cn('font-medium underline underline-offset-4', className)}
       {...props}
     />
   ),
-  p: ({ className, ...props }) => (
+  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
     <p
       className={cn('leading-7 [&:not(:first-child)]:mt-6', className)}
       {...props}
     />
   ),
-  ul: ({ className, ...props }) => (
+  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
     <ul className={cn('my-6 ml-6 list-disc', className)} {...props} />
   ),
-  ol: ({ className, ...props }) => (
+  ol: ({ className, ...props }: React.OlHTMLAttributes<HTMLOListElement>) => (
     <ol className={cn('my-6 ml-6 list-decimal', className)} {...props} />
   ),
-  li: ({ className, ...props }) => (
+  li: ({ className, ...props }: React.LiHTMLAttributes<HTMLLIElement>) => (
     <li className={cn('mt-2', className)} {...props} />
   ),
-  blockquote: ({ className, ...props }) => (
+  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <blockquote
       className={cn(
-        'mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground',
+        'mt-6 border-l-2 border-l-default pl-6 italic [&>*]:text-foreground',
         className,
       )}
       {...props}
@@ -106,7 +102,7 @@ const components = {
     alt,
     ...props
   }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-    <img className={cn('rounded-md border', className)} alt={alt} {...props} />
+    <img className={cn('rounded-md border border-default', className)} alt={alt} {...props} />
   ),
   hr: ({ ...props }) => <hr className="my-4 md:my-8" {...props} />,
   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
@@ -116,41 +112,41 @@ const components = {
   ),
   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
     <tr
-      className={cn('m-0 border-t p-0 even:bg-muted', className)}
+      className={cn('m-0 border-t border-t-default p-0 even:bg-muted', className)}
       {...props}
     />
   ),
-  th: ({ className, ...props }) => (
+  th: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <th
       className={cn(
-        'border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right',
+        'border border-default px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right',
         className,
       )}
       {...props}
     />
   ),
-  td: ({ className, ...props }) => (
+  td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <td
       className={cn(
-        'border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+        'border border-default px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
         className,
       )}
       {...props}
     />
   ),
-  pre: ({ className, ...props }) => (
+  pre: ({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) => (
     <pre
       className={cn(
-        'mb-4 mt-6 overflow-x-auto rounded-lg border bg-black py-4 px-2',
+        'mb-4 mt-6 overflow-x-auto rounded-lg border border-default bg-black py-4 px-2',
         className,
       )}
       {...props}
     />
   ),
-  code: ({ className, ...props }) => (
+  code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <code
       className={cn(
-        'relative rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm',
+        'relative rounded-small bg-default text-foreground px-[0.3rem] py-[0.2rem] font-mono text-small',
         className,
       )}
       {...props}

apps/web/components/menu.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { DocsSearch } from './docs-search'
 import { Icons } from './icons'
-import MovilSidebar from './mobile-sidebar'
+import MobileSidebar from './mobile-sidebar'
 import { DarkMode } from './dark-mode'
 
 const links = [
@@ -23,7 +23,7 @@ export default function Menu() {
           </small>
         </aside>
       )}
-      <nav className="block w-full max-w-full px-4 py-2 rounded-none shadow-md h-max bg-background lg:px-8 lg:py-4 dark:border dark:border-default">
+      <nav className="block w-full max-w-full px-4 py-2 z-50 backdrop-blur-lg bg-opacity-50 sticky top-0 shadow-medium h-max bg-background lg:px-6 lg:py-4 backdrop-saturate-150 inset-x-0">
         <div className="flex items-center gap-x-6 justify-between">
           <div className="flex items-center gap-x-8">
             <Link
@@ -37,25 +37,23 @@ export default function Menu() {
             <div className="hidden mr-4 md:block">
               <nav className="flex gap-2 mt-2 mb-4 lg:mb-0 lg:mt-0 items-center">
                 {links.map((link, i) => (
-                  <Link key={i} href={link.path} className="p-1 text-small hover:underline">
+                  <Link key={i} href={link.path} className="p-1 text-small hover:text-foreground/80">
                     {link.name}
                   </Link>
                 ))}
               </nav>
             </div>
           </div>
-          <div className="flex items-center">
-            <div className="flex items-center gap-4">
-              <DocsSearch className="hidden md:flex" />
-              <div className="flex items-center gap-x-1">
-                <Button asChild color="ghost" size="icon">
-                  <Link href="https://github.com/Open-Lab-dev/openui">
-                    <Icons.GitHub className="size-6" />
-                  </Link>
-                </Button>
-                <DarkMode />
-              </div>
-              <MovilSidebar />
+          <div className="flex items-center gap-4">
+            <DocsSearch className="hidden md:flex" />
+            <div className="flex items-center gap-x-1">
+              <Button asChild color="ghost" size="icon">
+                <Link href="https://github.com/Open-Lab-dev/openui">
+                  <Icons.GitHub className="size-6" />
+                </Link>
+              </Button>
+              <DarkMode />
+              <MobileSidebar />
             </div>
           </div>
         </div>

apps/web/components/mobile-nav.tsx

@@ -14,9 +14,9 @@ export function MobileNav({ items, children }: MobileNavProps) {
 
   return (
     <div
-      className="fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max overflow-auto p-6 pb-32 shadow-md animate-in slide-in-from-bottom-80 md:hidden"
+      className="fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max overflow-auto p-6 pb-32 shadow-medium animate-in slide-in-from-bottom-80 md:hidden"
     >
-      <div className="relative z-20 grid gap-6 rounded-md bg-popover p-4 text-popover-foreground shadow-md">
+      <div className="relative z-20 grid gap-6 rounded-md bg-popover p-4 text-popover-foreground shadow-medium">
         <Link href="/" className="flex items-center space-x-2">
           Open UI
         </Link>

apps/web/components/mobile-sidebar.tsx

@@ -3,17 +3,17 @@ import { Button, ScrollArea, Sheet, SheetContent, SheetTrigger } from '@openui-o
 import { DocsSidebarNav } from './sidebar-nav'
 import { docsConfig } from '@/constants/docs'
 
-export default function MovilSidebar() {
+export default function MobileSidebar() {
   const [open, setOpen] = useState(false)
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button color="ghost" size="icon" className="relative bg-transparent border border-default md:hidden h-9 px-5">
-          <span className=" absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
+        <Button color="ghost" size="icon" className="md:hidden">
+          <span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
-              <path d="M4 5L20 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M4 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M4 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M4 5L20 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M4 12L20 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M4 19L20 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
           </span>
         </Button>

apps/web/components/page-header.tsx

@@ -19,7 +19,7 @@ export function DocsPageHeader({
         </h1>
         {text && <p className="text-large">{text}</p>}
       </div>
-      <hr className="my-4" />
+      <hr className="my-4 border-default" />
     </>
   )
 }

package.json

@@ -13,7 +13,7 @@
     "clean": "rimraf .turbo pnpm-lock.yaml node_modules",
     "turbo-graph": "pnpm build --graph=dependency-graph.png",
     "clean-lock": "rimraf ./pnpm-lock.yaml",
-    "compile": "turbo compile --filter=!@openui-org/docs --filter=!@openui-org/storybook",
+    "compile": "turbo compile --filter=!@openui-org/web --filter=!@openui-org/storybook",
     "build": "turbo build --filter=!@openui-org/docs --filter=!@openui-org/storybook --filter=!@openui-org/playground-next --filter=!@openui-org/playground-vue --filter=!@openui-org/web",
     "build-web": "turbo build --filter=@openui-org/web",
     "postinstall": "esno ./.github/prepare.ts && pnpm --filter @openui-org/theme build",

packages/components/react/scroll-area/scroll-bar.tsx

@@ -14,7 +14,7 @@ const ScrollBar = React.forwardRef<Comp, Props>(({ className, orientation = 'ver
     && 'h-2.5 flex-col border-t border-t-transparent p-[1px]', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-default" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 

packages/components/react/select/select-trigger.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<Comp, Props>(({ className, shadow, childr
       {children}
       <SelectPrimitive.Icon asChild>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="foreground" fill="none">
-          <path d="M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>