Install

Start with a React 18 or 19 app and the Node.js version your framework requires. TypeScript is recommended. The package works on its own; you don't need the Fragments desktop app to use it.

npm install @usefragments/ui

import "@usefragments/ui/styles";
import type { ReactNode } from "react";
import { Theme, Tooltip, Toast } from "@usefragments/ui";

function App({ children }: { children: ReactNode }) {
  return (
    <Theme defaultMode="system">
      <Tooltip.Provider>
        <Toast.Provider>{children}</Toast.Provider>
      </Tooltip.Provider>
    </Theme>
  );
}

1. Load styles in your app

   Import the stylesheet once at your app entry point.

   Vite

   // src/main.tsx
   import "@usefragments/ui/styles";

   Next.js

   // app/layout.tsx
   import "@usefragments/ui/styles";

   Keep state, event handlers, and theme providers in a client component. Add 'use client' at that component's entry point. For a saved theme that loads before the first paint, follow the Theme guideto add ThemeScript and the matching provider.

   If your Next.js version reports an untranspiled package error, add transpilePackages: ['@usefragments/ui'] to its configuration.

2. Render a component

   Import components from the package. Compound components group their parts under one name: Card.Header, Card.Body, and Card.Footer all come from Card.

   "use client";
   
   import { Button, Card } from "@usefragments/ui";
   
   export function Welcome() {
     return (
       <Card>
         <Card.Header>
           <Card.Title>Ready to build</Card.Title>
         </Card.Header>
         <Card.Body>Compose your interface from Fragments components.</Card.Body>
         <Card.Footer>
           <Button>Start a project</Button>
         </Card.Footer>
       </Card>
     );
   }

   Confirm the card and button are styled. If they render without styling, check that the stylesheet import is in the entry file your app actually loads.

:root {
  --fui-seed-brand: #6366f1;
}

@use "@usefragments/ui/scss" with (
  $fui-brand: #6366f1,
  $fui-radius-style: "rounded"
);

import "@usefragments/ui/styles";
import "./styles/globals.scss";