Fragments Sdk Ui

@fragments-sdk/ui

A component library built on Base UI headless primitives with design tokens, SCSS modules, and full AI agent support. Project home: 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
• 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

pnpm add @fragments-sdk/ui
# or: npm install @fragments-sdk/ui

Peer dependencies:

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:

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:

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:

// next.config.js
const nextConfig = {
  transpilePackages: ["@fragments-sdk/ui"],
};

Then use components:

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
• Source: fragments-sdk/ui
• License: MIT
• Homepage: https://usefragments.com

Install and usage instructions live in the source repository linked above.