Dev (#18)

* fix: github star count, footer font and animation block

* fix: reuse component homepage card in mobile screen

* fix: reuse component animation

* fix: reuse animation timing and ref

* fix: type errors in vite and broken links

* chore(cli): updated the css file template

* fix(cli): website url changed from localhost to radianos

* chore(cli): new version v0.1.2 published

* perf(website): get-package-info cache set to no-store and removed revalidate

* chore: check to see if github stars is being shown

* chore: github button implementation updated

* chore: implemented the counting animation in github stars button

* chore: check to see if github stars is being shown

* chore: check to see if github stars is being shown

* feat(website): get-early-updates dialog implemented on landing page

* style(website): get-early-updates dialog styling changed

* chore(website): get-product-updates parameter to open dialog

* feat(blog): email-subscribe functionality added to the form

* docs: inverted-section and replaced with &

* fix: hover and link on animation list component removed

* style: copy terminal command  toast styles updated

* style: website.css heading's letter tracking set to -1%

* fix: figma docs update

* fix: community card pattern and color update

* fix: figma cover image width and cta card pattern width

* fix: blur image in dark-mode-playground

* fix: usesage of lunk button in alert

* style: accordion trigger and chevron gap set for FAQs

* fix: figma width

* chore: video added

* fix: video aspect ratio applied and youtube video link added

* fix: youtube embeded link

* fix: youtube embed

* fix: video embed youtube

* fix: video width and beam animation

* fix: table hover bg-fill1 and beam alignment

* chore: .env.example updated with clarity

* fix: add missing border colors in docs and change tab active text color

* fix: minor z index issues

* chore: fix typography headings

* refactor: dark and light image added in reuseable ui blocks component

* fix: reuseable float animation removed and image update

* fix: homepage home-interactive section height update for small screen

* chore(og): og static and dynamic images updated to new

* chore(og): static og image updated to new dimension

* style: email template background set

* fix: base component section image size and badge size

* fix: gradient in base component

* fix: fix font issue in docs

* fix: blocks search icon and add extra block links

* fix: svg height

* fix: readme file image link updated for website

* chore: ibm-plex-sans font import url fixed and global css template for cli updated

* chore(cli): released v0.1.3 radianui

* style: change search command badge variant

* chore: figma-card.tsx and upload.tsx updated

* fix: removed gradient in bottom of cta section

* fix: correct signup form label id

* feat(website): add virtualized list example for combobox

* refactor: carousel image refactor

* fix: safari browser video

* fix: video format changed for safari

* fix: video tag updated for safari compatibility

* test: debug video issue for safari

* test: safari test with simple video implementation

* test: safari autoplay

* test: safari video loading

* test: fallback poster and webm video format added

* fix: adding cache for version

* fix: build error

* feat(sidebar): add initial sidebar implementation

* feat: add temporary sidebar route

* chore: minor changes/fix

- open blocks link in new tab
- remove arrow in sidebar tooltip

* style(sidebar): add collapsed icon styles for sidebar examples

* style(sidebar): nested collapsible sidebar poc

* fix: playground section bg color inverted

* style(sidebar): remove nested collapsible hover logic

* fix: playground color

* chore: color input added

* test: llms.txt file added

* chore: llms text file of components and it's examples

* fix: color updated

* chore: llms.txt file updated

* fix: url in llms.txt

* fix: unused color removed, llms.txt update and playground border updated to soft

* fix: border color update

* docs: add sidebar docs page

* refactor: replace custom CodeSnippet component with standard MDX code blocks

- Remove all <CodeSnippet> component usages in MDX files
- Use default MDX code fence (```) syntax for code formatting
- This enables Contentlayer to handle code highlighting consistently and
  reduces custom component overhead

The change simplifies the codebase by relying on MDX's native code block
support, making future maintenance easier and improving compatibility
with standard Markdown tooling.

* perf: replace CodeSnippet with ComponentSource in ComponentPreview

ComponentSource caches highlighted code output, avoiding redundant
syntax highlighting on every render. CodeSnippet recomputes this
on each call, making it slower for frequently rendered previews.

* chore: formatting issue

* perf: eliminate client-side bundle bloat in docs pages

- Remove allDocs import from AsideBar client component by migrating
  TOC rendering to a parallel route slot (@aside/[...slug]/page.tsx)
  with full slug access at build time
- Remove redundant examples.json import from page.tsx — JSON was
  imported directly in mdx.tsx and the passed prop was unused
- Fix mdx.tsx ComponentPreview lookup using hardcoded [0] index,
  replace with proper find() by file path
- Convert DocsLayout and AsideBar to server components

AllDocs and examples.json were being serialized into __NEXT_DATA__
on every docs page navigation, causing significant hydration overhead.

* perf: move ThemeProvider out of layout.tsx

* perf: add appropriate cache headers and fix middleware matching logic
for .md routes

* fix: correct import paths and remove aggressive cache override

- Update imports from '@/registry' to '@/components' across affected files
- Remove hardcoded Cache-Control: max-age=60, stale-while-revalidate=30
  from next.config.js — this was overriding Next.js SSG default headers,
  causing Cloudflare to treat all docs pages as DYNAMIC and skip caching

* chore: change cache header

* chore: change cache header

* fix: resolve color table values not being applied correctly

* chore: merge main

---------

Co-authored-by: yube01 <yubraja008@gmail.com>
Co-authored-by: Ashmit72 <ashmitbastola@gmail.com>
Co-authored-by: Be-En-AyA <bt.binaya@gmail.com>
Co-authored-by: Ashmit Bastola <114178696+Ashmit72@users.noreply.github.com>
Co-authored-by: Binaya Thapa <106618310+BeEnAyA@users.noreply.github.com>

Author: 4 people

apps/website/next.config.js

@@ -47,6 +47,15 @@ const nextConfig = {
 					},
 				],
 			},
+			{
+				source: "/docs/:path*",
+				headers: [
+					{
+						key: "Cache-Control",
+						value: "public, max-age=31536000, immutable",
+					},
+				],
+			},
 		]
 	},
 

apps/website/public/llms.txt

@@ -0,0 +1,80 @@
+# Radian Documentation for LLMs
+
+> Radian is an open source React-based UI component library that provides a wide range of reusable components and design tokens, along with an accompanying Figma design system, to help developers and designers build consistent and visually appealing web applications.
+
+This documentation is designed for AI agents and LLMs, providing structured Markdown files optimized for context retrieval, semantic understanding, and automated code generation.
+
+## Getting Started
+
+- [Introduction](http://localhost:3001/docs/getting-started/introduction.md): Detailed documentation for Introduction
+- [Installation](http://localhost:3001/docs/getting-started/installation.md): Detailed documentation for Installation
+- [CLI](http://localhost:3001/docs/getting-started/cli.md): Detailed documentation for CLI
+- [Figma](http://localhost:3001/docs/getting-started/figma.md): Detailed documentation for Figma
+- [Changelog](http://localhost:3001/docs/getting-started/changelog.md): Detailed documentation for Changelog
+
+## Installation
+
+- [Nextjs](http://localhost:3001/docs/installation/next.md): Detailed documentation for Nextjs
+- [Vite](http://localhost:3001/docs/installation/vite.md): Detailed documentation for Vite
+- [Manual](http://localhost:3001/docs/installation/manual.md): Detailed documentation for Manual
+
+## Fundamentals
+
+> Universal settings for building a strong foundation for a digital product
+
+- [Colors](http://localhost:3001/docs/fundamentals/colors.md): 156 colors, 70 color tokens
+- [Typography](http://localhost:3001/docs/fundamentals/typography.md): 17 Styles
+- [Iconography](http://localhost:3001/docs/fundamentals/iconography.md): 1,200 Components
+- [Theme](http://localhost:3001/docs/fundamentals/theme.md): 8 Types
+- [Theme — Next.js](http://localhost:3001/docs/fundamentals/theme/nextjs.md): Detailed documentation for Theme (Next.js)
+- [Theme — Vite](http://localhost:3001/docs/fundamentals/theme/vite.md): Detailed documentation for Theme (Vite)
+
+## Components
+
+- [Accordion](http://localhost:3001/docs/components/accordion.md): Detailed documentation for Accordion
+- [Alert](http://localhost:3001/docs/components/alert.md): Detailed documentation for Alert
+- [Alert Dialog](http://localhost:3001/docs/components/alert-dialog.md): Detailed documentation for Alert Dialog
+- [Aspect Ratio](http://localhost:3001/docs/components/aspect-ratio.md): Detailed documentation for Aspect Ratio
+- [Avatar](http://localhost:3001/docs/components/avatar.md): Detailed documentation for Avatar
+- [Badge](http://localhost:3001/docs/components/badge.md): Detailed documentation for Badge
+- [Banner](http://localhost:3001/docs/components/banner.md): Detailed documentation for Banner
+- [Breadcrumb](http://localhost:3001/docs/components/breadcrumb.md): Detailed documentation for Breadcrumb
+- [Button](http://localhost:3001/docs/components/button.md): Detailed documentation for Button
+- [Calendar](http://localhost:3001/docs/components/calendar.md): Detailed documentation for Calendar
+- [Card](http://localhost:3001/docs/components/card.md): Detailed documentation for Card
+- [Carousel](http://localhost:3001/docs/components/carousel.md): Detailed documentation for Carousel
+- [Checkbox](http://localhost:3001/docs/components/checkbox.md): Detailed documentation for Checkbox
+- [Code Area](http://localhost:3001/docs/components/code-area.md): Detailed documentation for Code Area
+- [Collapsible](http://localhost:3001/docs/components/collapsible.md): Detailed documentation for Collapsible
+- [Combobox](http://localhost:3001/docs/components/combobox.md): Detailed documentation for Combobox
+- [Command](http://localhost:3001/docs/components/command.md): Detailed documentation for Command
+- [Currency Input](http://localhost:3001/docs/components/currency-input.md): Detailed documentation for Currency Input
+- [Date Picker](http://localhost:3001/docs/components/date-picker.md): Detailed documentation for Date Picker
+- [Dialog](http://localhost:3001/docs/components/dialog.md): Detailed documentation for Dialog
+- [Divider](http://localhost:3001/docs/components/divider.md): Detailed documentation for Divider
+- [Drawer](http://localhost:3001/docs/components/drawer.md): Detailed documentation for Drawer
+- [Dropdown](http://localhost:3001/docs/components/dropdown.md): Detailed documentation for Dropdown
+- [Empty](http://localhost:3001/docs/components/empty.md): Detailed documentation for Empty
+- [File Upload](http://localhost:3001/docs/components/file-upload.md): Detailed documentation for File Upload
+- [Form](http://localhost:3001/docs/components/form.md): Detailed documentation for Form
+- [Hover Card](http://localhost:3001/docs/components/hover-card.md): Detailed documentation for Hover Card
+- [Input](http://localhost:3001/docs/components/input.md): Detailed documentation for Input
+- [Label](http://localhost:3001/docs/components/label.md): Detailed documentation for Label
+- [OTP Field](http://localhost:3001/docs/components/otp-field.md): Detailed documentation for OTP Field
+- [Pagination](http://localhost:3001/docs/components/pagination.md): Detailed documentation for Pagination
+- [Phone Number Input](http://localhost:3001/docs/components/phone-number-input.md): Detailed documentation for Phone Number Input
+- [Popover](http://localhost:3001/docs/components/popover.md): Detailed documentation for Popover
+- [Progress](http://localhost:3001/docs/components/progress.md): Detailed documentation for Progress
+- [Radio Group](http://localhost:3001/docs/components/radio-group.md): Detailed documentation for Radio Group
+- [Resizable](http://localhost:3001/docs/components/resizable.md): Detailed documentation for Resizable
+- [Scroll Area](http://localhost:3001/docs/components/scroll-area.md): Detailed documentation for Scroll Area
+- [Select](http://localhost:3001/docs/components/select.md): Detailed documentation for Select
+- [Skeleton](http://localhost:3001/docs/components/skeleton.md): Detailed documentation for Skeleton
+- [Slider](http://localhost:3001/docs/components/slider.md): Detailed documentation for Slider
+- [Sonner](http://localhost:3001/docs/components/sonner.md): Detailed documentation for Sonner
+- [Spinner](http://localhost:3001/docs/components/spinner.md): Detailed documentation for Spinner
+- [Switch](http://localhost:3001/docs/components/switch.md): Detailed documentation for Switch
+- [Table](http://localhost:3001/docs/components/table.md): Detailed documentation for Table
+- [Tabs](http://localhost:3001/docs/components/tabs.md): Detailed documentation for Tabs
+- [Text Area](http://localhost:3001/docs/components/text-area.md): Detailed documentation for Text Area
+- [Tooltip](http://localhost:3001/docs/components/tooltip.md): Detailed documentation for Tooltip

apps/website/src/app/(app)/docs/@aside/[...slug]/page.tsx

@@ -0,0 +1,22 @@
+import { allDocs } from "contentlayer/generated"
+import AsideBar from "@/components/aside-bar"
+import { getHeadingsFromMdx } from "@/lib/get-mdx-headings"
+
+export const revalidate = false
+export const dynamic = "force-static"
+export const dynamicParams = false
+
+interface Props {
+	params: Promise<{ slug: string[] }>
+}
+
+export default async function AsideSlot({ params }: Props) {
+	const resolvedParams = await params
+	const slug = resolvedParams.slug.join("/")
+	const doc = allDocs.find((d) => d.slugAsParams === slug)
+	if (!doc) return null
+
+	const headings = await getHeadingsFromMdx(doc.rawMdx)
+
+	return <AsideBar headings={headings} />
+}

apps/website/src/app/(app)/docs/[...slug]/page.tsx

@@ -7,23 +7,25 @@ import { notFound } from "next/navigation"
 import { Mdx } from "@/components/mdx"
 import { PreviousNextButtons } from "@/components/prev-next-buttons"
 import { websiteMetadata } from "@/config/website-metadata-config"
-import { ThemeProvider } from "@/contexts/theme-context"
-import Examples from "@/registry/example/example.json"
 import { Badge } from "@/registry/ui/badge"
 
+export const revalidate = false
+export const dynamic = "force-static"
+export const dynamicParams = false
+
 interface DocPageProps {
-	params: Promise<{ slug: string[] }> // 👈 Promise-based!
+	params: Promise<{ slug: string[] }>
 }
 
-// ✅ Await `params` inside the function
+// Await `params` inside the function
 async function getDocFromParams({ params }: DocPageProps) {
 	const resolvedParams = await params
 	const slug = resolvedParams.slug.join("/") || ""
 	const doc = allDocs.find((doc) => doc.slugAsParams === slug)
 	return doc ?? null
 }
 
-// ✅ Static path generation
+// Static path generation
 export async function generateStaticParams() {
 	return allDocs.map((doc) => ({
 		slug: doc.slugAsParams.split("/"),
@@ -69,13 +71,12 @@ export async function generateMetadata({
 	}
 }
 
-// ✅ Await `params` in the page itself
+// Await `params` in the page itself
 export default async function Page({ params }: DocPageProps) {
 	const resolvedParams = await params
 	const doc = await getDocFromParams({ params })
 	const currentPath = `/docs/${resolvedParams.slug.join("/")}`
 	const category = doc?.slugAsParams.split("/")[0].replace("-", " ")
-	const componentName = doc?.slugAsParams.split("/").pop() || ""
 
 	if (!doc) return notFound()
 
@@ -152,14 +153,8 @@ export default async function Page({ params }: DocPageProps) {
 					</section>
 				)}
 			</div>
-			<ThemeProvider>
-				<Mdx
-					code={doc.body.code}
-					examples={Examples.filter(
-						(example) => example.name === componentName
-					)}
-				/>
-			</ThemeProvider>
+
+			<Mdx code={doc.body.code} />
 
 			<PreviousNextButtons currentPath={currentPath} className="mt-10" />
 		</div>

apps/website/src/app/(app)/docs/layout.tsx

@@ -1,27 +1,16 @@
-"use client"
-
 import React, { ReactNode } from "react"
-import { useTheme } from "next-themes"
-import { Toaster, ToasterProps } from "sonner"
-import AsideBar from "@/components/aside-bar"
 import Sidebar from "@/components/sidebar-app"
-import { useToast } from "@/contexts/toast-context"
+import ToasterWrapper from "@/components/toaster-wrapper"
 
 interface Props {
 	children: ReactNode
+	aside: ReactNode
 }
 
-const DocsLayout = ({ children }: Props) => {
-	const { position, isExpandable } = useToast()
-	const { theme = "system" } = useTheme()
-
+const DocsLayout = ({ children, aside }: Props) => {
 	return (
 		<div className="max-w-368 mx-auto flex w-full px-4 md:px-5">
-			<Toaster
-				expand={isExpandable}
-				position={position}
-				theme={theme as ToasterProps["theme"]}
-			/>
+			<ToasterWrapper />
 
 			{/* Left Sidebar */}
 			<Sidebar />
@@ -30,7 +19,7 @@ const DocsLayout = ({ children }: Props) => {
 			<div className="flex-1 overflow-hidden">{children}</div>
 
 			{/* Right Sidebar (TOC) - Only show on docs pages */}
-			<AsideBar />
+			{aside}
 		</div>
 	)
 }

apps/website/src/app/(sidebar)/sidebar-doc/app-sidebar.tsx

@@ -9,13 +9,20 @@ import {
 	FileChartColumn,
 	Headset,
 	Inbox,
+	Info,
 	Search,
 	Settings,
 	TvMinimal,
 	Users2,
 } from "lucide-react"
 import Link from "next/link"
 import { Badge } from "@/registry/ui/badge"
+import { IconButton } from "@/registry/ui/button"
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "@/registry/ui/hover-card"
 import { Input, InputWrapper } from "@/registry/ui/input"
 import {
 	Sidebar,
@@ -35,9 +42,11 @@ import {
 	SidebarMenuSubItem,
 	SidebarRail,
 	SidebarSeparator,
+	useSidebar,
 } from "@/registry/ui/sidebar"
 import AcmeLogo from "./acme-logo"
-import Logo from "./logo"
+import { InfoCard } from "./info-card"
+import MageLogo from "./mage-logo"
 import RadianCoreLogo from "./radian-core-logo"
 import { SidebarFooterUser } from "./sidebar-footer-user"
 
@@ -119,7 +128,7 @@ const mainData: NavGroup[] = [
 		title: "Projects",
 		items: [
 			{
-				icon: Box,
+				icon: MageLogo,
 				label: "Mage Icons",
 			},
 			{
@@ -153,24 +162,43 @@ const footerData: NavGroup[] = [
 ]
 
 export function AppSidebar() {
+	const { setOpen } = useSidebar()
+	const inputRef = React.useRef<HTMLInputElement>(null)
+
 	return (
 		<Sidebar collapsible="icon">
-			<SidebarHeader>
+			<SidebarHeader className="p-0">
 				<div className="flex items-center gap-2 px-1.5 py-1">
-					<Logo />
+					<span className="w-6" />
 					<span className="truncate font-semibold group-data-[collapsible=icon]:hidden">
 						Debcon
 					</span>
 				</div>
 
-				<div className="w-full px-3 py-2 group-data-[state=collapsed]:hidden">
-					<InputWrapper className="w-full">
-						<Search className="text-fg-tertiary size-5" />
-						<Input type="search" placeholder="Search" />
+				<div className="w-full px-3 py-2 group-data-[state=collapsed]:px-2">
+					<InputWrapper
+						className="group-data-[state=collapsed]:hidden"
+						size="32">
+						<Search className="text-fg-tertiary" />
+						<Input ref={inputRef} type="search" placeholder="Search" />
 						<Badge size="20" color="neutral" variant="outline">
 							⌘ /
 						</Badge>
 					</InputWrapper>
+
+					<IconButton
+						onClick={() => {
+							setOpen(true)
+							setTimeout(() => {
+								inputRef.current?.focus()
+							}, 200)
+						}}
+						size="32"
+						variant="outline"
+						color="neutral"
+						className="group-data-[mobile=true]:hidden group-data-[state=expanded]:hidden">
+						<Search className="text-fg-tertiary" />
+					</IconButton>
 				</div>
 			</SidebarHeader>
 			<SidebarContent>
@@ -228,6 +256,24 @@ export function AppSidebar() {
 			</SidebarContent>
 
 			<SidebarFooter className="gap-0 p-0">
+				<div className="p-2 group-data-[mobile=true]:hidden group-data-[state=expanded]:hidden">
+					<HoverCard>
+						<HoverCardTrigger asChild>
+							<IconButton size="32" variant="ghost" color="neutral">
+								<Info className="text-fg-secondary" />
+							</IconButton>
+						</HoverCardTrigger>
+						<HoverCardContent
+							side="right"
+							sideOffset={4}
+							className="w-60 rounded-lg border-none p-0">
+							<InfoCard className="p-0" />
+						</HoverCardContent>
+					</HoverCard>
+				</div>
+
+				<InfoCard className="group-data-[state=collapsed]:hidden" />
+
 				<SidebarGroup>
 					<SidebarGroupContent>
 						<SidebarMenu>

apps/website/src/app/(sidebar)/sidebar-doc/info-card.tsx

@@ -0,0 +1,21 @@
+import { ChevronRight, Info } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export function InfoCard({ className }: { className?: string }) {
+	return (
+		<div className={cn("px-3 py-1.5", className)}>
+			<div className="bg-bg border-soft flex items-center gap-2 rounded-lg border px-2.5 py-1.5">
+				<Info className="size-6" />
+				<div className="flex flex-col">
+					<span className="text-[13px] font-medium leading-5">
+						Version 1.2 Update
+					</span>
+					<span className="text-fg-tertiary flex cursor-pointer items-center text-sm font-normal">
+						<span>Learn More</span>
+						<ChevronRight className="size-4" />
+					</span>
+				</div>
+			</div>
+		</div>
+	)
+}