Conversation
…arts, Combobox, DatePicker, and Stepper with comprehensive documentation
…mentation for loading states and placeholders
…umentation, and refactor Tabs for improved usability and state management
… Checkbox, Form, Input, Label, Radio Group, Select, Slider, Switch, Textarea, and Toggle, including two-way binding and accessibility features
…, Card, Collapsible, Dialog, Drawer, Popover, Separator, Sheet, Tooltip with comprehensive documentation and usage examples
…ion, including usage examples and API references
…luding new chart components and enhanced documentation for installation, theming, and usage
…in home components; enhance HomePage content with versioning and updated descriptions
…ion pages for improved consistency and readability
…on to 0.1.0, and enhance configuration files for improved consistency and readability
…ShellUI, including setup instructions, component management, and project structure guidance
…n for consistency with new naming convention
…tadata generation for improved user guidance
…tion to align with new naming convention
… clarity and consistency, including new structure and labeling for better user guidance
… name and email, enhancing user interaction and profile management
…Stepper components to improve clarity, consistency, and usability, including enhanced examples and parameter descriptions
…s, adding subpage details and updating code examples for improved clarity and usability
…ility, including new features like placeholder text, clear button functionality, and disabled state examples
…ing installation instructions, usage examples, and API references to enhance user understanding and implementation
… detailing installation, usage examples, themes, and accessibility features to enhance user experience and implementation guidance
…on instructions, usage examples, performance metrics, and API reference to support user implementation and understanding
…n instructions, usage examples, custom tooltips, and API reference to support user implementation and understanding
…nstallation instructions, usage examples, mixed chart types, and API reference to support user implementation and understanding
There was a problem hiding this comment.
Pull request overview
Updates the ShellUI documentation site to reflect the v0.2.0 docs content, expands component documentation coverage (notably charts and several layout/navigation/interactive components), and applies broad formatting/consistency changes across the Next.js/Fumadocs codebase.
Changes:
- Refresh docs content/metadata to “v0.2.0” and expand/reshape several guides (Quickstart, Theming, Components, Comparison, etc.).
- Add many new component documentation pages (charts section + multiple new layout/navigation/interactive/data-display/advanced pages).
- Apply widespread formatting/quote-style normalization across config, app routes, and components.
Reviewed changes
Copilot reviewed 101 out of 105 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| shellui/source.config.ts | Quote/style normalization in docs source config. |
| shellui/public/tailwind-logo.svg | SVG attribute casing changed (now uses camelCase). |
| shellui/public/dotnet-logo.svg | SVG attribute casing changed (now uses camelCase). |
| shellui/public/csharp-logo.svg | SVG attribute casing changed (now uses camelCase). |
| shellui/public/blazor-logo.svg | SVG attribute casing changed (now uses camelCase). |
| shellui/postcss.config.mjs | Quote/style normalization in PostCSS config. |
| shellui/package.json | Bumps app version to 0.1.0. |
| shellui/next.config.mjs | Quote/style normalization in Next config import. |
| shellui/mdx-components.tsx | Quote/style normalization for MDX component imports. |
| shellui/lib/utils.ts | Quote/style normalization for utility imports. |
| shellui/lib/source.ts | Quote/style normalization + minor string literal changes. |
| shellui/lib/layout.shared.tsx | Updates nav links + GitHub URL + nav title wrapper markup. |
| shellui/content/docs/theming/meta.json | Removes trailing newline; no semantic change. |
| shellui/content/docs/theming/index.mdx | Updates theming guide content for v0.2.0 + adds chart theming section. |
| shellui/content/docs/quickstart/meta.json | Removes trailing newline; no semantic change. |
| shellui/content/docs/quickstart/index.mdx | Updates quickstart for v0.2.0 + adds charts onboarding content. |
| shellui/content/docs/meta.json | Updates docs root title/description to v0.2.0 messaging. |
| shellui/content/docs/installation/meta.json | Changes installation nav structure to include subpages. |
| shellui/content/docs/index.mdx | Updates landing docs page content for v0.2.0 + new badges/feature list. |
| shellui/content/docs/contributing/meta.json | Removes trailing newline; no semantic change. |
| shellui/content/docs/contributing/index.mdx | Updates contribution links to new GitHub org + minor wording cleanup. |
| shellui/content/docs/components/navigation/pagination.mdx | Adds new Pagination component documentation. |
| shellui/content/docs/components/navigation/navbar.mdx | Adds new Navbar component documentation. |
| shellui/content/docs/components/navigation/index.mdx | Updates navigation category examples (Navbar + Tabs example swap-in). |
| shellui/content/docs/components/layout/tooltip.mdx | Adds new Tooltip component documentation. |
| shellui/content/docs/components/layout/sheet.mdx | Adds new Sheet component documentation. |
| shellui/content/docs/components/layout/separator.mdx | Reworks Separator docs structure/API table/accessibility notes. |
| shellui/content/docs/components/layout/popover.mdx | Adds new Popover component documentation. |
| shellui/content/docs/components/layout/index.mdx | Updates layout category example (Breadcrumb API example). |
| shellui/content/docs/components/layout/drawer.mdx | Adds new Drawer component documentation. |
| shellui/content/docs/components/layout/collapsible.mdx | Adds new Collapsible component documentation. |
| shellui/content/docs/components/layout/card.mdx | Reworks Card docs to compound sub-components + updated API tables. |
| shellui/content/docs/components/layout/breadcrumb.mdx | Adds new Breadcrumb component documentation. |
| shellui/content/docs/components/layout/accordion.mdx | Reworks Accordion docs structure + updates examples/API table/accessibility notes. |
| shellui/content/docs/components/interactive/theme-toggle.mdx | Adds new ThemeToggle component documentation. |
| shellui/content/docs/components/interactive/index.mdx | Updates interactive category examples (Dropdown + EmptyState). |
| shellui/content/docs/components/interactive/empty-state.mdx | Adds new EmptyState component documentation. |
| shellui/content/docs/components/index.mdx | Updates component catalog page with counts + v0.2.0 “What’s New” (charts). |
| shellui/content/docs/components/form/toggle.mdx | Updates Toggle docs for enum-based API + refreshed examples. |
| shellui/content/docs/components/form/textarea.mdx | Updates Textarea docs structure + API table adjustments. |
| shellui/content/docs/components/form/switch.mdx | Updates Switch docs structure + API table adjustments. |
| shellui/content/docs/components/form/slider.mdx | Updates Slider docs structure + API table adjustments. |
| shellui/content/docs/components/form/select.mdx | Updates Select docs structure + examples + API table adjustments. |
| shellui/content/docs/components/form/radio-group.mdx | Updates RadioGroup docs to simpler usage (removes CascadingValue example). |
| shellui/content/docs/components/form/label.mdx | Updates Label docs structure/examples + API table/accessibility notes. |
| shellui/content/docs/components/form/input.mdx | Updates Input docs structure + API table + examples. |
| shellui/content/docs/components/form/input-otp.mdx | Updates InputOTP docs structure + API table + trims long flow example. |
| shellui/content/docs/components/form/form.mdx | Updates Form docs structure + validation example + API table. |
| shellui/content/docs/components/form/checkbox.mdx | Updates Checkbox docs structure + examples + API table adjustments. |
| shellui/content/docs/components/form/button.mdx | Updates Button docs to enum-based API + refreshed examples/API table. |
| shellui/content/docs/components/data-display/toast.mdx | Adds new Toast component documentation. |
| shellui/content/docs/components/data-display/skeleton.mdx | Adds new Skeleton component documentation. |
| shellui/content/docs/components/data-display/progress.mdx | Reworks Progress docs + examples + API/accessibility notes. |
| shellui/content/docs/components/data-display/loading.mdx | Adds new Loading component documentation. |
| shellui/content/docs/components/data-display/index.mdx | Updates data-display examples to newer API surface (Avatar/Badge/Alert usage). |
| shellui/content/docs/components/data-display/badge.mdx | Reworks Badge docs to enum-based API + updated examples/API table. |
| shellui/content/docs/components/data-display/avatar.mdx | Reworks Avatar docs to enum-based API + updated examples/API table. |
| shellui/content/docs/components/data-display/alert.mdx | Reworks Alert docs to enum-based API + adds icon slot examples. |
| shellui/content/docs/components/advanced/stepper.mdx | Adds new Stepper component documentation. |
| shellui/content/docs/components/advanced/index.mdx | Updates advanced category overview + adds charts highlight + example. |
| shellui/content/docs/components/advanced/date-picker.mdx | Adds new DatePicker component documentation. |
| shellui/content/docs/components/advanced/combobox.mdx | Adds new Combobox component documentation. |
| shellui/content/docs/components/advanced/charts/pie-chart.mdx | Adds PieChart documentation under charts. |
| shellui/content/docs/components/advanced/charts/meta.json | Adds charts section meta (subpage ordering). |
| shellui/content/docs/components/advanced/charts/line-chart.mdx | Adds LineChart documentation under charts. |
| shellui/content/docs/components/advanced/charts/index.mdx | Adds charts landing page (themes, shared API, install, examples). |
| shellui/content/docs/components/advanced/charts/bar-chart.mdx | Adds BarChart documentation under charts. |
| shellui/content/docs/components/advanced/charts/area-chart.mdx | Adds AreaChart documentation under charts. |
| shellui/content/docs/components/advanced/carousel.mdx | Adds new Carousel component documentation. |
| shellui/content/docs/components/advanced/calendar.mdx | Updates Calendar docs example to enum-based Button variant. |
| shellui/content/docs/components/advanced/alert-dialog.mdx | Adds new AlertDialog documentation. |
| shellui/content/docs/comparison/meta.json | Removes trailing newline; no semantic change. |
| shellui/content/docs/comparison/index.mdx | Updates comparison tables for v0.2.0 (counts, Tailwind version, charts, CVA). |
| shellui/components/section-switcher.tsx | Formatting + section list expansion/cleanup. |
| shellui/components/logo.tsx | Reduces logo size in UI. |
| shellui/components/code-block.tsx | Quote/style normalization + minor formatting cleanup. |
| shellui/biome.json | Condenses includes list formatting. |
| shellui/app/og/docs/[...slug]/route.tsx | Formatting cleanup in OG image route handler. |
| shellui/app/llms-full.txt/route.ts | Quote/style normalization in LLM export route. |
| shellui/app/layout.tsx | Formatting cleanup + icon metadata formatting changes. |
| shellui/app/docs/theming/page.tsx | Import/order formatting + quote normalization. |
| shellui/app/docs/quickstart/page.tsx | Import/order formatting + quote normalization. |
| shellui/app/docs/page.tsx | Import/order formatting + quote normalization. |
| shellui/app/docs/layout.tsx | Import/order formatting + quote normalization + icon-link filter string update. |
| shellui/app/docs/installation/page.tsx | Removes single installation page route (replaced by catch-all). |
| shellui/app/docs/installation/[[...slug]]/page.tsx | Adds installation catch-all routing + static params + metadata generation. |
| shellui/app/docs/framework/page.tsx | Quote/style normalization. |
| shellui/app/docs/contributing/page.tsx | Import/order formatting + quote normalization. |
| shellui/app/docs/components/[[...slug]]/page.tsx | Formatting cleanup around dynamic docs page routing/metadata. |
| shellui/app/docs/comparison/page.tsx | Import/order formatting + quote normalization. |
| shellui/app/api/search/route.ts | Quote/style normalization in search API route. |
| shellui/app/(home)/sponsors/page.tsx | Formatting cleanup. |
| shellui/app/(home)/showcase/page.tsx | Formatting cleanup. |
| shellui/app/(home)/layout.tsx | Quote/style normalization + formatting cleanup in home layout. |
| shellui/app/(home)/blog/page.tsx | Formatting cleanup. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| type: "icon", | ||
| url: "https://github.com/shellui-dev/shellui", | ||
| label: "github", | ||
| text: "Github", |
There was a problem hiding this comment.
The link text uses "Github". For the brand name and consistency with the repository URL/label, this should be "GitHub".
| ```razor | ||
| <div class="space-y-2"> | ||
| <Label For="email">Email</Label> | ||
| <Input Id="email" Placeholder="email@example.com" Type="email" /> | ||
| </div> | ||
| ``` | ||
|
|
||
| ## With Icon | ||
|
|
||
| ```razor | ||
| <div class="relative"> | ||
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">@</span> | ||
| <Input Class="pl-10" Placeholder="Email" Type="email" /> | ||
| <Input Placeholder="email@example.com" Type="email" /> | ||
| </div> |
There was a problem hiding this comment.
In the "With Label" example, Label For="email" is used but the Input doesn’t provide a matching Id="email". This breaks the label association and conflicts with the accessibility bullet that calls out For/Id usage.
| "name": "shellui", | ||
| "version": "0.0.0", | ||
| "version": "0.1.0", | ||
| "private": true, |
There was a problem hiding this comment.
The package version is set to 0.1.0, but the docs in this PR are repeatedly branded as v0.2.0. If this package version is meant to track the docs/app release, it should be bumped to 0.2.0 to avoid a confusing mismatch.
| ```razor | ||
| <div class="space-y-2"> | ||
| <Label For="email">Email</Label> | ||
| <Input Id="email" Type="email" Placeholder="email@example.com" /> | ||
| <Input Type="email" Placeholder="email@example.com" /> | ||
| </div> |
There was a problem hiding this comment.
This example is labeled "With Input Association" and uses Label For="email", but the corresponding Input no longer sets Id="email". Without the matching Id, the label/input association doesn’t work as described (and contradicts the accessibility notes below).
| className={`w-full p-3 rounded-md border transition-colors cursor-pointer ${ | ||
| pathname.startsWith(section.href) | ||
| ? 'bg-primary text-primary-foreground border-primary' | ||
| : 'bg-background hover:bg-muted border-border' | ||
| ? "bg-primary text-primary-foreground border-primary" | ||
| : "bg-background hover:bg-muted border-border" |
There was a problem hiding this comment.
The active-state check pathname.startsWith(section.href) will mark the "/docs" (Framework) section as active for every docs subpage (e.g. "/docs/components"), so multiple sections can appear active at once. Consider special-casing the root section to use an exact match (pathname === "/docs") and using startsWith only for the other sections.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
… states Co-authored-by: Shewart <105489800+Shewart@users.noreply.github.com>
Fix section-switcher active state logic for root docs section
LGTM
#LFGGG 🚀