# Fragments Sdk Ui > Accessible React component library built on Base UI. Components, blocks, design tokens, and an MCP server for AI agents. MIT licensed. Issues welcome — canonical source lives in the private fragments monorepo. - **Type:** MCP server - **Install:** `agentstack add mcp-fragments-sdk-ui` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [fragments-sdk](https://agentstack.voostack.com/s/fragments-sdk) - **Installs:** 0 - **Category:** [Integrations](https://agentstack.voostack.com/c/integrations) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [fragments-sdk](https://github.com/fragments-sdk) - **Source:** https://github.com/fragments-sdk/ui - **Website:** https://usefragments.com ## Install ```sh agentstack add mcp-fragments-sdk-ui ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # @fragments-sdk/ui A component library built on [Base UI](https://base-ui.com/) headless primitives with design tokens, SCSS modules, and full AI agent support. Project home: [usefragments.com](https://usefragments.com). ## About this repository This GitHub repository is a **read-only mirror** of `@fragments-sdk/ui`. The canonical source lives in a private monorepo and is mirrored here on every push to `main`. - **Install from npm:** `pnpm add @fragments-sdk/ui` (or `npm install @fragments-sdk/ui`) - **Docs:** [usefragments.com](https://usefragments.com) - **Issues:** file them in this repo — they're triaged by maintainers. - **Contributions:** pull requests are not merged from this mirror. Describe proposed changes in an issue; maintainers land them in the canonical repo and the mirror re-syncs automatically. ## Install ```bash pnpm add @fragments-sdk/ui # or: npm install @fragments-sdk/ui ``` Peer dependencies: ```bash npm install react react-dom ``` ## Setup **Quick start (no SCSS)** — import the prebuilt CSS in your app entry point. This loads component styles with default tokens: ```tsx import "@fragments-sdk/ui/styles"; ``` **Custom theming (SCSS)** — create a `.scss` file with `@use '@fragments-sdk/ui/styles' with (...)` to set your seed values, then import both: ```tsx import "@fragments-sdk/ui/styles"; // component styles (ui.css) import "./styles/globals.scss"; // your seed overrides ``` **Next.js users** — add `transpilePackages` to your `next.config.js`: ```js // next.config.js const nextConfig = { transpilePackages: ["@fragments-sdk/ui"], }; ``` Then use components: ```tsx import { Button, Card, Input, Grid } from "@fragments-sdk/ui"; function App() { return ( Submit ); } ``` ## Components | Component | Category | Description | | ----------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Accordion | Layout | Vertically stacked, collapsible content sections. Use for organizing related content that can be progressively disclosed. | | Alert | Feedback | Contextual feedback messages for user actions or system status. Supports multiple severity levels with optional actions and dismissibility. | | AppShell | Layout | Full layout wrapper integrating sidebar, header, main content, and optional aside panel. Supports three layout modes: default (header on top), sidebar (sidebar full height), and sidebar-floating (rounded main content). | | Avatar | Display | Visual representation of a user or entity | | Badge | Display | Compact label for status, counts, or categorization. Draws attention to metadata without dominating the layout. | | Box | Layout | Primitive layout component for applying spacing, backgrounds, and borders. A flexible container for building custom layouts. | | Breadcrumbs | Navigation | Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages. | | Button | Forms | Interactive element for user actions and form submissions | | ButtonGroup | Forms | Groups related buttons together with consistent spacing and alignment. Useful for action bars, toolbars, and related button sets. | | Card | Layout | Container for grouping related content | | Chart | Display | Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration. | | Checkbox | Forms | Binary toggle for form fields. Use for options that require explicit submission, unlike Switch which takes effect immediately. | | Chip | Forms | Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group. | | CodeBlock | Display | Syntax-highlighted code display with copy functionality, theming, diff view, and collapsible sections | | Collapsible | Layout | An interactive component that expands/collapses to show or hide content | | ColorPicker | Forms | Color selection control with hex input and visual picker. Displays a swatch that opens a full color picker on click. | | Combobox | Forms | Searchable select input that filters a dropdown list of options as you type. Supports single and multiple selection with chips. | | ConversationList | Ai | Scrollable message container with auto-scroll and history loading | | Dialog | Feedback | Modal overlay for focused user interactions. Use for confirmations, forms, or content requiring full attention. | | EmptyState | Feedback | Placeholder for empty content areas. Provides context, guidance, and actions when no data is available. | | Field | Forms | Compositional form field wrapper providing validation, labels, descriptions, and error messages. Use for advanced form needs beyond baked-in Input/Textarea props. | | Fieldset | Forms | Groups related form fields with an accessible legend. Use to organize forms into logical sections. | | Form | Forms | Form wrapper that handles server-side error distribution to Field components. Pairs with Field for complete form validation. | | Grid | Layout | Responsive grid layout for arranging items in columns with consistent spacing | | Header | Navigation | Composable header with slots for brand, navigation, search, and actions. Supports dropdown nav groups via Header.NavMenu. Designed for use within AppShell with responsive mobile support. | | Icon | Display | Wrapper for Phosphor icons with consistent sizing and semantic colors. Provides standardized icon rendering across the design system. | | Image | Display | Responsive image component with aspect ratio control, loading states, and error fallbacks. Handles image display with consistent styling. | | Input | Forms | Text input field for single-line user data entry | | Link | Navigation | Styled anchor element for navigation. Supports internal and external links with consistent visual treatment. | | List | Display | Compound component for rendering ordered or unordered lists with consistent styling. Supports bullet, numbered, and icon-prefixed items. | | Listbox | Forms | Controlled listbox for search results, autocomplete dropdowns, and command menus. Provides Menu-like styling without requiring a trigger. | | Loading | Feedback | Versatile loading indicator with multiple variants for showing progress or waiting states | | Markdown | Display | Renders markdown strings as styled prose using react-markdown and remark-gfm. Supports headings, lists, tables, code blocks, blockquotes, and more. | | Menu | Feedback | Dropdown menu for actions and commands. Use for contextual actions, overflow menus, or grouped commands. | | Message | Ai | Individual chat message display with role-based styling | | Popover | Feedback | Rich content overlay anchored to a trigger element. Use for forms, detailed information, or interactive content that should stay in context. | | Progress | Feedback | Visual indicator of task completion or loading state. Available in linear and circular variants. | | Prompt | Ai | Multi-line input with toolbar for AI/chat interfaces | | RadioGroup | Forms | Single selection from a list of mutually exclusive options | | ScrollArea | Layout | A styled scrollable container with thin scrollbars and optional fade indicators. | | Select | Forms | Dropdown for choosing from a list of options. Use when there are more than 4-5 choices that would clutter the UI. | | Separator | Layout | Visual divider between content sections. Use to create clear visual boundaries and improve content organization. | | Sidebar | Navigation | Responsive navigation sidebar with collapsible desktop mode and mobile drawer behavior. | | Skeleton | Feedback | Placeholder loading state for content | | Slider | Forms | Range input control for selecting a numeric value within a defined range. Supports labels, value display, and custom step intervals. | | Stack | Layout | Flexible layout component for arranging children in rows or columns with consistent spacing. Supports responsive direction and gap. | | Table | Display | Data table with sorting and row selection. Use for displaying structured data that needs to be scanned, compared, or acted upon. | | Tabs | Navigation | Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout. | | Text | Display | Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements. | | Textarea | Forms | Multi-line text input for longer form content | | Theme | Navigation | Theme management system with provider, toggle, and hook pattern. Supports light, dark, and system modes with localStorage persistence. | | ThinkingIndicator | Ai | Animated indicator showing AI is processing | | Toast | Feedback | Brief, non-blocking notification messages | | Switch | Forms | Binary on/off switch for settings and preferences. Provides immediate visual f … ## Source & license This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [fragments-sdk](https://github.com/fragments-sdk) - **Source:** [fragments-sdk/ui](https://github.com/fragments-sdk/ui) - **License:** MIT - **Homepage:** https://usefragments.com Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/mcp-fragments-sdk-ui - Seller: https://agentstack.voostack.com/s/fragments-sdk - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.