Skip to content

Docs improvements #1662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kotAPI wants to merge 2 commits into
base: main
Choose a base branch
from
+702 −564
Open

Docs improvements #1662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6b20ae
fix: formatting, improve examples
kotAPI Dec 20, 2025
fcf0543
add: tooltip temp fix
kotAPI Dec 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/app/docs/components/alert-dialog/docs/example_1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ const AlertDialogExample = () => {
<AlertDialog.Description>
This action cannot be undone.
</AlertDialog.Description>
<div className="flex justify-end gap-2">
<AlertDialog.Action>
Delete
</AlertDialog.Action>
<AlertDialog.Cancel>
Cancel
</AlertDialog.Cancel>
</div>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
Expand Down
45 changes: 35 additions & 10 deletions docs/app/docs/components/aspect-ratio/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Documentation from "@/components/layout/Documentation/Documentation"
import AspectRatio from "@radui/ui/AspectRatio"
import codeUsage, { AspectRatioTable } from "./docs/codeUsage"
import Card from "@radui/ui/Card"
import Ruler from "@/components/utility/Ruler"
import aspectRatioMetadata from "./seo"

export const metadata = aspectRatioMetadata
Expand All @@ -11,16 +12,40 @@ export const metadata = aspectRatioMetadata
description="Aspect Ratio is used to set the desired ratio."
>
<Documentation.ComponentHero codeUsage={codeUsage}>
<Card style={{ width: '300px', height: 'auto' }}>
<AspectRatio ratio="4/3">
<img
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
className="Image"
src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
alt="Landscape photograph"
/>
</AspectRatio>
</Card>
<div className="relative inline-flex flex-col items-center">
{/* Top ruler */}
<div className="mb-2 w-[300px]">
<Ruler orientation="horizontal" />
</div>

<div className="flex items-start gap-2">
{/* Left ruler */}
<div className="flex flex-col justify-center h-[225px]">
<Ruler orientation="vertical" />
</div>

<Card style={{ width: '300px', height: 'auto' }}>
<AspectRatio ratio="4/3">
<img
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
className="Image"
src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
alt="Landscape photograph"
/>
</AspectRatio>
</Card>

{/* Right ruler */}
<div className="flex flex-col justify-center h-[225px]">
<Ruler orientation="vertical" />
</div>
</div>

{/* Bottom ruler */}
<div className="mt-2 w-[300px]">
<Ruler orientation="horizontal" />
</div>
</div>
</Documentation.ComponentHero>

<Documentation.Table
Expand Down
2 changes: 1 addition & 1 deletion docs/app/docs/components/blockquote/examples/BlockQuoteColor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const BlockQuoteColor = () => {
return <div className='flex flex-col gap-4'>
{sizes.map((size, index) => {
return <BlockQuote key={index} size={size} color='pink'>
<span className='text-gray-950'>"Behind every great man is a woman rolling her eyes." — Jim Carrey</span>
<span className='text-gray-950'>"Behind every great man is a woman rolling her eyes." - Jim Carrey</span>
</BlockQuote>
})}
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/app/docs/components/blockquote/examples/BlockQuoteExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import BlockQuote from "@radui/ui/BlockQuote"
const BlockQuoteExample = () => (
<div className="text-gray-950">
<BlockQuote color="green">
"Behind every great man is a woman rolling her eyes." — Jim Carrey
"Behind every great man is a woman rolling her eyes." - Jim Carrey
</BlockQuote>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion docs/app/docs/components/blockquote/examples/BlockQuoteSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const BlockQuoteSizes = () => {

{sizes.map((size, index) => {
return <BlockQuote key={index} size={size} >
<span className='text-gray-950'>"Behind every great man is a woman rolling her eyes." — Jim Carrey</span>
<span className='text-gray-950'>"Behind every great man is a woman rolling her eyes." - Jim Carrey</span>
</BlockQuote>
})}
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/app/docs/components/callout/examples/CalloutColor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";
import Callout from "@radui/ui/Callout";
import { BookmarkIcon } from './CalloutExample';
import { AlertCircle as BookmarkIcon } from 'lucide-react';
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Misleading icon alias: AlertCircle imported as BookmarkIcon.

Same issue as in CalloutSizes.tsx—the AlertCircle icon is semantically a warning/error indicator, not a bookmark. The alias creates confusion about what icon is actually being displayed.

🔎 Proposed fix 
-import { AlertCircle as BookmarkIcon } from 'lucide-react';
+import { AlertCircle } from 'lucide-react';
-                                <BookmarkIcon className="w-full h-full" />
+                                <AlertCircle className="w-full h-full" />

Also applies to: 12-12

🤖 Prompt for AI Agents 
In docs/app/docs/components/callout/examples/CalloutColor.tsx around lines 3 and
12, the code imports AlertCircle but aliases it as BookmarkIcon which is
misleading; change the alias to a name matching the actual icon (e.g.,
AlertCircleIcon or AlertIcon) and update any usages in the file to use that new,
semantically correct identifier so the icon name matches its visual meaning.


const CalloutColor = () => {
const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink'];
Expand All @@ -9,7 +9,7 @@ const CalloutColor = () => {
return (
<Callout.Root color={color} key={index}>
<Callout.Icon>
<BookmarkIcon />
<BookmarkIcon className="w-full h-full" />
</Callout.Icon>
<Callout.Text>
Seems like there's been an error. Please try again.
Expand Down
7 changes: 2 additions & 5 deletions docs/app/docs/components/callout/examples/CalloutExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@

"use client";
import Callout from "@radui/ui/Callout";

export const BookmarkIcon = () => {
return <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};
import { AlertCircle as BookmarkIcon } from 'lucide-react';
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Read the CalloutExample.tsx file to see current state
cat -n docs/app/docs/components/callout/examples/CalloutExample.tsx

Repository: rad-ui/ui

Length of output: 617

🏁 Script executed:

# Search for any imports of BookmarkIcon from CalloutExample
rg "from ['\"].*CalloutExample['\"]" -A 5 -B 2

# Search for any references to BookmarkIcon in the codebase
rg "BookmarkIcon" --type=tsx --type=ts --type=jsx --type=js

Repository: rad-ui/ui

Length of output: 906

🏁 Script executed:

# Let's check what's actually exported from codeUsage and if BookmarkIcon is defined there
cat -n docs/app/docs/components/callout/docs/codeUsage.ts 2>/dev/null || cat -n docs/app/docs/components/callout/docs/codeUsage.tsx 2>/dev/null || cat -n docs/app/docs/components/callout/docs/codeUsage.js 2>/dev/null

# Search for BookmarkIcon definition
rg "BookmarkIcon" -A 3 -B 3

# Check if CalloutExample exports BookmarkIcon
rg "export.*BookmarkIcon"

Repository: rad-ui/ui

Length of output: 13377

🏁 Script executed:

# Check git history to see if BookmarkIcon was previously exported from codeUsage
git log --oneline -p docs/app/docs/components/callout/docs/codeUsage.ts 2>/dev/null | head -100

# Also check CalloutExample export history
git log --oneline -p docs/app/docs/components/callout/examples/CalloutExample.tsx 2>/dev/null | head -100

# Check if page.mdx actually uses the imported BookmarkIcon
grep -n "BookmarkIcon" docs/app/docs/components/callout/page.mdx

Repository: rad-ui/ui

Length of output: 943

Remove misleading icon alias in Callout examples.

The AlertCircle icon is semantically incorrect as BookmarkIcon and should use its proper name. This pattern appears in multiple example files: CalloutExample.tsx, CalloutSizes.tsx, CalloutVariants.tsx, and CalloutColor.tsx.

Additionally, docs/app/docs/components/callout/page.mdx has a broken import attempting to import BookmarkIcon from ./docs/codeUsage, but this file does not export it.

🤖 Prompt for AI Agents 
In docs/app/docs/components/callout/examples/CalloutExample.tsx around line 4,
the import aliases AlertCircle as BookmarkIcon are misleading; replace the alias
with the actual icon name (import { AlertCircle } from 'lucide-react') or import
the intended bookmark icon (e.g., import { Bookmark } from 'lucide-react') so
the symbol name matches its semantics; apply the same fix to CalloutSizes.tsx,
CalloutVariants.tsx, and CalloutColor.tsx, and in
docs/app/docs/components/callout/page.mdx remove or correct the broken import of
BookmarkIcon from ./docs/codeUsage (either export BookmarkIcon from that file or
import the correct icon directly from lucide-react).


const CalloutExample = () => (
<Callout.Root color="red">
<Callout.Icon>
<BookmarkIcon />
<BookmarkIcon className="w-full h-full" />
</Callout.Icon>
<Callout.Text>
Seems like there's been an error. Please try again.
Expand Down
4 changes: 2 additions & 2 deletions docs/app/docs/components/callout/examples/CalloutSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";
import Callout from '@radui/ui/Callout';
import { BookmarkIcon } from './CalloutExample';
import { AlertCircle as BookmarkIcon } from 'lucide-react';
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Misleading icon alias: AlertCircle imported as BookmarkIcon.

The AlertCircle icon from lucide-react represents warnings/errors, not bookmarks. Aliasing it as BookmarkIcon creates confusion for developers reading the code. Consider either using a semantically appropriate icon or renaming the variable to reflect the actual icon being used (e.g., AlertIcon or WarningIcon).

🔎 Proposed fix 
-import { AlertCircle as BookmarkIcon } from 'lucide-react';
+import { AlertCircle } from 'lucide-react';
-                                <BookmarkIcon className="w-full h-full" />
+                                <AlertCircle className="w-full h-full" />

Also applies to: 15-15

🤖 Prompt for AI Agents 
In docs/app/docs/components/callout/examples/CalloutSizes.tsx around lines 3 and
15, the file imports AlertCircle from lucide-react but aliases it as
BookmarkIcon which is misleading; update the import alias to a semantically
correct name (e.g., AlertIcon or WarningIcon) or replace the import with an
actual bookmark icon from lucide-react if a bookmark is intended, and then
update any usages to match the new identifier.


const CalloutSizes = () => {
const sizes = ['small', 'medium', 'large', 'x-large'];
Expand All @@ -12,7 +12,7 @@ const CalloutSizes = () => {
return (
<Callout.Root size={size} color="red" key={index}>
<Callout.Icon>
<BookmarkIcon />
<BookmarkIcon className="w-full h-full" />
</Callout.Icon>
<Callout.Text>
Seems like there's been an error. Please try again.
Expand Down
5 changes: 2 additions & 3 deletions docs/app/docs/components/callout/examples/CalloutVariants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
import Callout from '@radui/ui/Callout';
import Text from "@radui/ui/Text";
import Separator from '@radui/ui/Separator';

import { BookmarkIcon } from './CalloutExample';
import { AlertCircle as BookmarkIcon } from 'lucide-react';
import TooltipWrapper from '@/components/ui/Tooltip';

const CalloutVariants = () => {
Expand All @@ -21,7 +20,7 @@ const CalloutVariants = () => {
return <span key={idx}>
<Callout.Root variant={variant} color="red">
<Callout.Icon>
<BookmarkIcon />
<BookmarkIcon className="w-full h-full" />
</Callout.Icon>
<Callout.Text>
Seems like there's been an error. Please try again.
Expand Down
16 changes: 1 addition & 15 deletions docs/app/docs/components/toggle-group/docs/toggle-group-example-basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,7 @@
import React from 'react';

import ToggleGroup from '@radui/ui/ToggleGroup';

const FrameIcon = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1.5C11 1.22386 10.7761 1 10.5 1C10.2239 1 10 1.22386 10 1.5V4H5V1.5C5 1.22386 4.77614 1 4.5 1C4.22386 1 4 1.22386 4 1.5V4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H4V10H1.5C1.22386 10 1 10.2239 1 10.5C1 10.7761 1.22386 11 1.5 11H4V13.5C4 13.7761 4.22386 14 4.5 14C4.77614 14 5 13.7761 5 13.5V11H10V13.5C10 13.7761 10.2239 14 10.5 14C10.7761 14 11 13.7761 11 13.5V11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H11V5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H11V1.5ZM10 10V5H5V10H10Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};
const CropIcon = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8.00684e-07C3.77614 7.88614e-07 4 0.223859 4 0.500001L4 3.00006L11.5 3.00006C11.7761 3.00006 12 3.22392 12 3.50006L12 11.0001L14.5 11C14.7761 11 15 11.2238 15 11.5C15 11.7761 14.7762 12 14.5 12L12 12.0001L12 14.5C12 14.7761 11.7761 15 11.5 15C11.2239 15 11 14.7761 11 14.5L11 12.0001L3.5 12.0001C3.22386 12.0001 3 11.7762 3 11.5001L3 4.00005L0.499989 4C0.223847 4 -6.10541e-06 3.77613 -5.02576e-07 3.49999C5.13006e-06 3.22385 0.223867 3 0.50001 3L3 3.00005L3 0.500001C3 0.223859 3.22386 8.12755e-07 3.5 8.00684e-07ZM4 4.00006L4 11.0001L11 11.0001L11 4.00006L4 4.00006Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};

const LayersIcon = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.75432 0.819537C7.59742 0.726821 7.4025 0.726821 7.24559 0.819537L1.74559 4.06954C1.59336 4.15949 1.49996 4.32317 1.49996 4.5C1.49996 4.67683 1.59336 4.84051 1.74559 4.93046L7.24559 8.18046C7.4025 8.27318 7.59742 8.27318 7.75432 8.18046L13.2543 4.93046C13.4066 4.84051 13.5 4.67683 13.5 4.5C13.5 4.32317 13.4066 4.15949 13.2543 4.06954L7.75432 0.819537ZM7.49996 7.16923L2.9828 4.5L7.49996 1.83077L12.0171 4.5L7.49996 7.16923ZM1.5695 7.49564C1.70998 7.2579 2.01659 7.17906 2.25432 7.31954L7.49996 10.4192L12.7456 7.31954C12.9833 7.17906 13.2899 7.2579 13.4304 7.49564C13.5709 7.73337 13.4921 8.03998 13.2543 8.18046L7.75432 11.4305C7.59742 11.5232 7.4025 11.5232 7.24559 11.4305L1.74559 8.18046C1.50786 8.03998 1.42901 7.73337 1.5695 7.49564ZM1.56949 10.4956C1.70998 10.2579 2.01658 10.1791 2.25432 10.3195L7.49996 13.4192L12.7456 10.3195C12.9833 10.1791 13.2899 10.2579 13.4304 10.4956C13.5709 10.7334 13.4921 11.04 13.2543 11.1805L7.75432 14.4305C7.59742 14.5232 7.4025 14.5232 7.24559 14.4305L1.74559 11.1805C1.50785 11.04 1.42901 10.7334 1.56949 10.4956Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};

const ColumnsIcon = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.14998 14V1H0.849976V14H2.14998ZM6.14998 14V1H4.84998V14H6.14998ZM10.15 1V14H8.84998V1H10.15ZM14.15 14V1H12.85V14H14.15Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};
import { Frame as FrameIcon, Crop as CropIcon, Layers as LayersIcon, Columns as ColumnsIcon } from 'lucide-react';

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
const items = [
Expand Down
3 changes: 2 additions & 1 deletion docs/app/docs/components/toggle/docs/toggle-example-basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
import React from 'react';

import Toggle from '@radui/ui/Toggle';
import { Power } from 'lucide-react';

const ToggleExampleBasic = () => {
const [pressed, setPressed] = React.useState(false);

const Icon = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
return <Power className="w-full h-full" />;
};

const handleChange = (newPressed) => {
Expand Down
12 changes: 4 additions & 8 deletions docs/app/docs/components/tooltip/docs/examples/tooltip_example1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
"use client"

import Card from "@radui/ui/Card"
import Tooltip from "@radui/ui/Tooltip"
import Text from "@radui/ui/Text"

const TooltipExample1 = () => {
return (
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Card className="bg-gray-50" style={{ display: "flex", gap: 20 }}>
<Text className="text-gray-950">Hello Tooltip. Hover Me!</Text>
</Card>
<Tooltip.Trigger>
Hello Tooltip. Hover Me!
</Tooltip.Trigger>
<Tooltip.Content>
Hello from the tooltip!
<Tooltip.Content className="z-[9999] bg-black rounded shadow-lg">
Hello from the tooltip!
</Tooltip.Content>
</Tooltip.Root>
)
Expand Down
10 changes: 10 additions & 0 deletions docs/app/docs/contributing/component-coverage/CoverageIcons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
'use client';

import { Check, X, AlertCircle, Minus } from 'lucide-react';

export const CheckIcon = () => <Check className="w-4 h-4 inline-block text-green-900" />;
export const XIcon = () => <X className="w-4 h-4 inline-block text-gray-600" />;
export const HighPriorityIcon = () => <AlertCircle className="w-4 h-4 inline-block text-red-600" />;
export const MediumPriorityIcon = () => <AlertCircle className="w-4 h-4 inline-block text-yellow-600" />;
export const DashIcon = () => <Minus className="w-4 h-4 inline-block text-gray-400" />;

Loading
Loading