Product screens,already designed

Add it to your appin four steps

1. Install the package

   One package, with the components, the tokens and the stylesheets.

   npmpnpmyarnbun

   $ npm install ferry-ui

2. Import the styles

   After Tailwind CSS v4, import the theme. It brings the tokens and the classes of the components.

   @import "tailwindcss";
   @import "ferry-ui/fonts.css"; /* optional: Inter and Source Code Pro */
   @import "ferry-ui/theme.css";

3. Mount the providers

   One time, at the root of the app: the theme, the tooltips and the toasts.

   import type { ReactNode } from 'react'
   import { ThemeProvider, Toaster, TooltipProvider } from 'ferry-ui'
   
   export function Providers({ children }: { children: ReactNode }) {
     return (
       <ThemeProvider defaultTheme="system">
         <TooltipProvider>
           {children}
           <Toaster />
         </TooltipProvider>
       </ThemeProvider>
     )
   }

4. Use a component

   Import each component from the package root.

   import { Button, EmptyState } from 'ferry-ui'
   import { FolderKanban, Plus } from 'lucide-react'
   
   export function NoProjects({ onCreate }: { onCreate: () => void }) {
     return (
       <EmptyState
         icon={<FolderKanban />}
         title="No projects yet"
         description="Projects group your invoices, members and API keys."
         actions={
           <Button variant="primary" icon={<Plus />} onClick={onCreate}>
             New project
           </Button>
         }
       />
     )
   }