Skip to content

COMPONENT_ROADMAP.md

Latest commit

 

History

History
129 lines (93 loc) · 7.15 KB

COMPONENT_ROADMAP.md

File metadata and controls

129 lines (93 loc) · 7.15 KB
Raw

ShellUI Component Roadmap

Goal: Build the components and tooling needed for a Tailwind-first Blazor design system.

.NET 10 · Tailwind CSS 4.3.2

Current inventory

ComponentRegistry is the source of truth for component availability, names, and dependencies. The current registry contains 194 entries:

  • 90 direct CLI targets shown by shellui list
  • 104 hidden entries for sub-components, variants, models, services, and support assets
  • Packable projects: ShellUI.CLI and ShellUI.Components

Hidden entries are not counted as direct targets. They can still be installed recursively when a parent target declares them.

Implemented direct targets (90)

The following categories describe the direct targets in the current registry, not a promise about future scope.

  • Form (26): Button, ButtonGroup, ChatInput, Checkbox, Combobox, DataPicker, DatePicker, DateRangePicker, FileUpload, Form, Input, InputGroup, InputOTP, Label, MultiSelect, NumberInput, RadioGroup, Select, Slider, Switch, TagInput, Textarea, TimePicker, Toggle, ToggleGroup, TypedSelect
  • Layout (13): Accordion, AspectRatio, Breadcrumb, Card, Collapsible, DashboardLayout01, DashboardLayout02, LinkCard, Navbar, Resizable, ScrollArea, Separator, Sidebar
  • Feedback (9): Alert, Callout, EmptyState, Loading, Progress, Skeleton, Sonner, Toast, Tooltip
  • Overlay (9): AlertDialog, Command, CommandPalette, Dialog, Drawer, Dropdown, HoverCard, Popover, Sheet
  • Navigation (8): ContextMenu, Menubar, NavigationMenu, Pagination, PrevNextNav, Stepper, Tabs, TreeView
  • Data Display (21): AreaChart, Avatar, Badge, BarChart, Calendar, Carousel, Chart, ChartSeries, Chat, ChatMessage, DataTable, DonutChart, LineChart, MultiSeriesChart, PieChart, QrCode, RadarChart, RadialChart, StatCard, Table, Timeline
  • Typography (1): Kbd
  • Media (1): ImageViewer
  • Utility (2): CopyButton, ThemeToggle

Added in 0.4

  • Kbd — keyboard key hint
  • AspectRatio — fixed-ratio container
  • ButtonGroup — joined buttons, horizontal or vertical
  • ToggleGroup — single or multiple selection (ToggleGroupItem)
  • InputGroup — input with prefix and suffix slots
  • NumberInput — increment/decrement input with min, max and step
  • StatCard — KPI tile with value, change and trend
  • Timeline — vertical event timeline (TimelineItem)
  • TreeView — expandable, selectable tree (TreeViewItem)
  • QrCode — QR code rendered as SVG (QRCoder)
  • ImageViewer — thumbnail with zoomable lightbox
  • Chat, ChatMessage, ChatInput — AI chat panel, message bubbles with streaming indicator, and a prompt input (Enter sends, Shift+Enter adds a newline)

ShellDocs (done)

Documentation-site components are implemented in ShellDocs, which builds on ShellUI. They are not ShellUI CLI targets.

  • CodeBlock — CodeGroup, CodeTab, and syntax highlighting via CodeBlockEnhancer
  • MarkdownRenderer — MarkdownContent
  • FileTree — FileTree, FileTreeItem
  • Full-text SearchDialog — SearchDialog backed by SearchIndex
  • TableOfContents
  • DocsSidebar, DocsHeader, DocsBreadcrumb wrappers
  • TypeTable — TypeTable and AutoTypeTable
  • Tabs (Docs variant) — CodeGroup / CodeTab
  • ShellDocs pipeline — frontmatter parsing, routing, search index, and live previews (ComponentPreview, PreviewFrame)

ShellUI building blocks used by ShellDocs: Callout, CopyButton, LinkCard, PrevNextNav, Breadcrumb, Tabs, Stepper, Command/CommandPalette, Sidebar, Navbar, ThemeToggle and Table.

Compositional upgrades (done)

The current registry provides explicit sub-components for these parent components. Where a parent declares them, the installer resolves them recursively; other parents may expose parts through a separate composition path.

  • Tabs — TabsList, TabsTrigger, TabsContent, value-based state
  • Stepper — StepperList, StepperStep, StepperContent, optional confirmation on the last step
  • Collapsible — CollapsibleTrigger, CollapsibleContent
  • Dialog — DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
  • Card — CardHeader, CardTitle, CardDescription, CardContent, CardFooter
  • Accordion — AccordionItem, AccordionTrigger, AccordionContent
  • Dropdown — DropdownTrigger, DropdownContent, DropdownItem
  • Popover — PopoverTrigger, PopoverContent
  • HoverCard — HoverCardTrigger, HoverCardContent
  • Drawer and Sheet — explicit trigger/content and variant support

Package only (CLI templates pending)

These parts exist in the ShellUI.Components NuGet package, but their CLI templates are empty placeholders, so CLI installs only get the parent component.

  • Select — SelectTrigger, SelectContent, SelectItem (the native select works in both)
  • ContextMenu — ContextMenuTrigger, ContextMenuContent, ContextMenuOption
  • NavigationMenu — NavList, NavItem, NavTrigger, NavContent
  • Carousel — CarouselList, CarouselSlide

The intended pattern is explicit child components, cascaded state and callbacks, value/label parameters, and Tailwind utility classes matching the shadcn-style API.

Unscheduled ideas

These are unscheduled ideas. They are not current registry targets, and no date or release commitment is implied.

AI

  • PromptSuggestions — clickable suggestion chips for empty chats
  • Reasoning / ToolCall — collapsible blocks for model reasoning and tool results
  • CodeBlock (ShellUI) — copyable code block for chat responses

Forms and input

  • Field — label, description and validation message wrapper
  • ColorPicker — swatches and HEX/RGB input
  • Rating — star rating input
  • SignaturePad — draw-to-sign canvas

Data and layout

  • VirtualList — wrapper over Blazor Virtualize with ShellUI styling
  • InfiniteScroll — load more on scroll
  • KanbanBoard — drag-and-drop columns and cards
  • SortableList — drag-and-drop reordering
  • JsonViewer — collapsible JSON tree with copy

Media

  • VideoPlayer — video playback with ShellUI controls
  • AudioPlayer — audio playback with waveform-style progress
  • ImageGallery — grid of images sharing one lightbox with next/previous
  • Barcode — barcode display

Rich content

  • RichTextEditor — WYSIWYG editor

Roadmap maintenance

  • Derive direct counts, names, categories, availability, and dependencies from ComponentRegistry.
  • Move an idea into the implemented section only when it has a registered target and a working CLI installation path.
  • Do not infer that a component is standalone from a prose list; use the dependency metadata described in COMPONENT_DEPENDENCIES.md.
  • Keep future ideas explicitly unscheduled until a release owner assigns a scope and date.