Skip to content

Commit 58abe5b

Browse files
cursoragentishaan-jaff
cursoragent
and
ishaan-jaff
committed
Redesign UI for enterprise-grade polish
Major visual overhaul to make the LiteLLM model catalog feel like a premium dev tool (Stripe docs / Linear quality). Typography & Foundation: - Replace PicoCSS with Inter font for body text - Add JetBrains Mono for code/model names - Clean CSS reset with proper box-sizing - Refined color palette with Slate-based neutrals Navigation: - Add gradient accent bar at page top - Sticky frosted-glass nav with backdrop blur - Active tab underline indicator - Purple 'Request' CTA button - GitHub icon in nav Models Page (biggest impact): - New hero: 'The Most Comprehensive AI Model Catalog' - GitHub stars badge - Trust logos section (NASA, Adobe, Netflix, Stripe, NVIDIA, Cruise) - Sortable table columns (click headers) - Mode badges (Chat, Image Gen, etc.) inline with model names - Structured expanded row replacing raw JSON dump: - Pricing cards (Input, Output, Cache Read, Cache Write) - Model info panel (provider, mode, token limits) - Feature checklist (Function Calling, Vision, JSON, etc.) - Python quick-start code snippet with syntax highlighting - Report incorrect data link - Search clear button, result count, clear-all-filters link - Skeleton loading states Stats Section: - Bolder typography (800 weight, larger size) - Hover with primary color border ring - Skeleton shimmer during load Providers Page: - Tighter card spacing, refined typography - JetBrains Mono for endpoint names - External link icons on provider cards - Better active endpoint highlighting Cookbook Page: - Guide count badge - Relative timestamps (1mo ago, 2w ago) - Refined card hover states - Streamlined submit modal Guardrails Page: - Community-contributed badge - Chevron expand indicators - Category labels in footer - Tighter spacing and refined cards Global: - Consistent 10px border-radius system - Refined shadow scale (sm/md/lg) - Dark mode improvements with deeper backgrounds - Smoother transitions (0.15s) Co-authored-by: Ishaan Jaff <ishaan-jaff@users.noreply.github.com>
1 parent eb6c917 commit 58abe5b

7 files changed

Lines changed: 1371 additions & 1616 deletions

File tree

‎index.html‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,21 @@
55
<link rel="icon" type="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>LiteLLM Providers & Models</title>
8-
<link
9-
rel="stylesheet"
10-
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
11-
/>
8+
<meta name="description" content="The most comprehensive AI model catalog. Pricing, context windows, and features for 2600+ models across 140+ providers." />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
12+
<style>
13+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
14+
html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
15+
body { line-height: 1.6; }
16+
a { text-decoration: none; color: inherit; }
17+
button { font-family: inherit; cursor: pointer; }
18+
input, textarea, select { font-family: inherit; }
19+
table { border-collapse: collapse; }
20+
img { max-width: 100%; }
21+
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
22+
</style>
1223
</head>
1324
<body>
1425
<div id="app"></div>

‎src/App.svelte‎

Lines changed: 733 additions & 249 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)