Skip to content

Use css variables and tailwind styles in custom components #804

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

Merged
merged 1 commit into from
Nov 22, 2025
Merged

Use css variables and tailwind styles in custom components #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion scripts/generate-cli-docs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,8 @@ async function createCommandPage(
}

if (command.usage) {
props.push(formatJsxProp("usage", command.usage));
// Wrap long usage commands for better readability
props.push(formatJsxProp("usage", wrapCliCommand(command.usage)));
}

// Get custom content from partial files
Expand Down
6 changes: 3 additions & 3 deletions src/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,21 +61,21 @@ export const mdxComponents = {
<Framed size={props.size}>
<Image
{...props}
className="border border-[#eaecef] overflow-hidden rounded-sm"
className="border border-border overflow-hidden rounded-sm"
/>
</Framed>
);
}
return (
<Image
{...props}
className="border border-[#eaecef] overflow-hidden rounded-sm"
className="border border-border overflow-hidden rounded-sm"
/>
);
},
Framed,
CodeType: (props: PropsWithChildren) => (
<code className="text-green-600">&lt;{props.children}&gt;</code>
<code className="text-primary">&lt;{props.children}&gt;</code>
),
DocusaurusDocsLicense,
GithubButton,
Expand Down
165 changes: 21 additions & 144 deletions src/components/BrowserScreenshot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import type { CSSProperties, PropsWithChildren, ReactElement } from "react";
import type { PropsWithChildren, ReactElement } from "react";

interface BrowserScreenshotProps {
url?: string;
browserTheme?: "light" | "dark";
browserShadow?: string;
borderRadius?: number;
className?: string;
style?: CSSProperties;
size?: "sm" | "md" | "lg";
}

Expand All @@ -19,162 +14,51 @@ const marginClasses = {
export function BrowserScreenshot({
children,
url = "https://example.com",
browserTheme = "light",
browserShadow = "0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04)",
borderRadius = 8,
className = "",
style,
size,
}: PropsWithChildren<BrowserScreenshotProps>): ReactElement {
const isDark = browserTheme === "dark";

const browserWindowStyle: CSSProperties = {
borderRadius: `${borderRadius}px`,
overflow: "hidden",
boxShadow: browserShadow,
backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"}`,
margin: "0 auto",
maxWidth: "90%",
...style,
};

const browserBarStyle: CSSProperties = {
height: "40px",
backgroundColor: isDark ? "#262626" : "#f6f6f6",
display: "flex",
alignItems: "center",
padding: "0 16px",
gap: "16px",
position: "relative" as const,
};

const trafficLightStyle: CSSProperties = {
display: "flex",
gap: "8px",
alignItems: "center",
};

const dotStyle: CSSProperties = {
width: "12px",
height: "12px",
borderRadius: "50%",
};

const navigationStyle: CSSProperties = {
display: "flex",
gap: "16px",
alignItems: "center",
};

const navButtonStyle: CSSProperties = {
width: "14px",
height: "14px",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
opacity: 0.6,
};

const urlBarStyle: CSSProperties = {
flex: 1,
maxWidth: "320px",
height: "28px",
backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"}`,
borderRadius: "20px",
padding: "0 12px",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "13px",
color: isDark ? "#888888" : "#666666",
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
};

const contentStyle: CSSProperties = {
backgroundColor: "#ffffff",
display: "block",
};

const marginClass = size
? marginClasses[size]
? marginClasses[size]
: "mx-auto"
: "mx-auto";
const marginClass = size ? (marginClasses[size] ?? "mx-auto") : "mx-auto";

return (
<div
className={`[&>p]:m-0 [&>p]:p-0 [&>p>img]:m-0 [&>p>img]:p-0 my-8 ${marginClass}`}
>
<div
className={`browser-screenshot-wrapper ${className}`}
style={browserWindowStyle}
>
<style
dangerouslySetInnerHTML={{
__html: `
.browser-screenshot-wrapper img {
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
max-width: 100% !important;
height: auto !important;
}
.browser-screenshot-wrapper p {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
`,
}}
/>
<div style={browserBarStyle}>
<div style={trafficLightStyle}>
<div className="overflow-hidden mx-auto max-w-[90%] rounded-lg shadow-lg border border-border bg-card [&_img]:!border-0 [&_img]:!rounded-none [&_img]:!p-0 [&_img]:!m-0 [&_img]:!block [&_img]:!max-w-full [&_img]:!h-auto [&_p]:!m-0 [&_p]:!p-0 [&_p]:!leading-[0]">
<div className="h-10 flex items-center px-4 gap-4 relative bg-gray-100 dark:bg-gray-900">
<div className="flex gap-2 items-center">
<div
style={{
...dotStyle,
backgroundColor: "#FE5F57",
}}
className="w-3 h-3 rounded-full"
style={{ backgroundColor: "#FE5F57" }}
/>
<div
style={{
...dotStyle,
backgroundColor: "#FEBB2E",
}}
className="w-3 h-3 rounded-full"
style={{ backgroundColor: "#FEBB2E" }}
/>
<div
style={{
...dotStyle,
backgroundColor: "#26C941",
}}
className="w-3 h-3 rounded-full"
style={{ backgroundColor: "#26C941" }}
/>
</div>
<div style={navigationStyle}>
<div style={navButtonStyle}>
<svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
<div className="flex gap-4 items-center">
<div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
<svg viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.46966 13.7803L6.99999 14.3107L8.06065 13.25L7.53032 12.7197L3.56065 8.75001H14.25H15V7.25001H14.25H3.56065L7.53032 3.28034L8.06065 2.75001L6.99999 1.68935L6.46966 2.21968L1.39644 7.2929C1.00592 7.68342 1.00592 8.31659 1.39644 8.70711L6.46966 13.7803Z"
/>
</svg>
</div>
<div style={navButtonStyle}>
<svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
<div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
<svg viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z"
/>
</svg>
</div>
<div style={navButtonStyle}>
<svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
<div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
<svg viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
Expand All @@ -183,20 +67,13 @@ export function BrowserScreenshot({
</svg>
</div>
</div>
<div style={urlBarStyle}>
<span
style={{
fontSize: "13px",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
<div className="flex-1 max-w-xs h-7 rounded-full px-3 flex items-center justify-center text-[13px] font-sans bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400">
<span className="text-[13px] whitespace-nowrap overflow-hidden text-ellipsis">
{url}
</span>
</div>
</div>
<div style={contentStyle}>{children}</div>
<div className="bg-card block">{children}</div>
</div>
</div>
);
Expand Down
25 changes: 14 additions & 11 deletions src/components/BundlesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,19 @@ export const BundlesTable = () => {

return (
<table className="w-full border-collapse text-sm">
<tr className="bg-gray-50 border-b">
<th className="px-3 py-2 text-left font-medium text-gray-600">
<tr className="bg-secondary border-b">
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Module
</th>
<th className="px-3 py-2 text-left font-medium text-gray-600">
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Status
</th>
<th className="px-3 py-2 text-left font-medium text-gray-600">
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Version
</th>{" "}
<th className="px-3 py-2 text-left font-medium text-gray-600">Notes</th>
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Notes
</th>
</tr>
{data?.bundles
.filter((bundle) => bundle.isPublic)
Expand All @@ -52,16 +54,17 @@ export const BundlesTable = () => {
let status = issue?.status ?? "Unknown";

const statusClass = {
Unknown: "bg-gray-200 text-gray-700",
Issues: "bg-red-100 text-red-800",
Working: "bg-green-200 text-green-800",
Unknown: "bg-secondary text-foreground",
Issues: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
Working:
"bg-green-200 text-green-800 dark:bg-green-900 dark:text-green-200",
};

return (
<tr className="border-b hover:bg-gray-50" key={i}>
<tr className="border-b hover:bg-accent" key={i}>
<td className="px-3 py-2 align-top">
<a
className="text-blue-600 hover:underline font-medium"
className="text-primary hover:underline font-medium"
href={
bundle.url ?? `https://www.npmjs.com/package/${bundle.name}`
}
Expand All @@ -80,7 +83,7 @@ export const BundlesTable = () => {
{bundle.version}
</td>

<td className="px-3 py-2 align-top text-gray-700 text-xs">
<td className="px-3 py-2 align-top text-foreground text-xs">
{notes}
</td>
</tr>
Expand Down
20 changes: 9 additions & 11 deletions src/components/CliCommand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
<h2 className="text-2xl font-bold mb-6">Examples</h2>
{examples.map(([cmd, desc], index) => (
<div key={index} className="mb-6">
<p className="mb-2 text-gray-700">{desc}</p>
<p className="mb-2 text-foreground">{desc}</p>
<SyntaxHighlight language="bash">
{cmd.replace(/\$0/g, "zuplo")}
</SyntaxHighlight>
Expand All @@ -184,53 +184,51 @@ export const CliCommand: React.FC<CliCommandProps> = ({
<code>--{option.name}</code>
</h3>
{option.description && (
<p className="mb-3 text-gray-700">{option.description}</p>
<p className="mb-3 text-foreground">{option.description}</p>
)}
<div className="text-sm text-gray-600">
<div className="text-sm text-muted-foreground">
{option.type && (
<span className="mr-3">
Type:{" "}
<code className="bg-gray-100 px-1 rounded">
{option.type}
</code>
<code className="bg-muted px-1 rounded">{option.type}</code>
</span>
)}
{option.default !== undefined && (
<span className="mr-3">
Default:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
{JSON.stringify(option.default)}
</code>
</span>
)}
{option.choices && option.choices.length > 0 && (
<span className="mr-3">
Choices:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
{option.choices.join(", ")}
</code>
</span>
)}
{option.alias && option.alias.length > 0 && (
<span className="mr-3">
Alias:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
-{option.alias.join(", -")}
</code>
</span>
)}
{option.envVar && (
<span className="mr-3">
Env:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
{option.envVar}
</code>
</span>
)}
{option.conflicts && option.conflicts.length > 0 && (
<span className="mr-3">
Conflicts:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
--{option.conflicts.join(", --")}
</code>
</span>
Expand Down
Loading
Loading