Composants UI

Bibliothèque de composants partagée avec Button, Card, Input, Toast et support de thèmes.

Vue d'ensemble

ScaleRocket fournit une bibliothèque de composants partagée dans packages/ui/. Construite sur Tailwind CSS et inspirée de shadcn/ui, ces composants sont utilisés dans les trois applications.

Composants disponibles

Button

import { Button } from "@saas/ui";

<Button variant="default">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
<Button variant="link">Link style</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>
<Button loading>Saving...</Button>

Props :

Prop	Type	Défaut	Description
`variant`	`"default" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`	Style visuel
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Taille du bouton
`loading`	`boolean`	`false`	Affiche un spinner et désactive le bouton
`disabled`	`boolean`	`false`	Désactive l'interaction

Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@saas/ui";

<Card>
  <CardHeader>
    <CardTitle>Plan Name</CardTitle>
    <CardDescription>Monthly subscription</CardDescription>
  </CardHeader>
  <CardContent>
    <p>$29/month</p>
  </CardContent>
  <CardFooter>
    <Button>Subscribe</Button>
  </CardFooter>
</Card>

Input

import { Input } from "@saas/ui";

<Input type="email" placeholder="you@example.com" />
<Input type="password" placeholder="Password" />
<Input disabled value="Read only" />

Props : Étend les props natives de <input> plus :

Prop	Type	Description
`error`	`string`	Affiche un message d'erreur sous le champ
`label`	`string`	Texte du label au-dessus du champ

Toast

import { useToast } from "@saas/ui";

const { toast } = useToast();

// Success
toast({ title: "Saved!", description: "Your changes have been saved." });

// Error
toast({ title: "Error", description: "Something went wrong.", variant: "destructive" });

Encapsulez votre application avec le provider Toaster :

import { Toaster } from "@saas/ui";

function App() {
  return (
    <>
      <YourApp />
      <Toaster />
    </>
  );
}

ThemeProvider

Fournit le support du mode clair/sombre dans toute l'application :

import { ThemeProvider } from "@saas/ui";

<ThemeProvider defaultTheme="system" storageKey="scalerocket-theme">
  <App />
</ThemeProvider>

Props :

Prop	Type	Défaut	Description
`defaultTheme`	`"light" \| "dark" \| "system"`	`"system"`	Thème initial
`storageKey`	`string`	`"theme"`	Clé localStorage pour la persistance

ThemeToggle

Un bouton déroulant pour basculer entre les thèmes clair, sombre et système :

import { ThemeToggle } from "@saas/ui";

<ThemeToggle />

Utilisation dans les applications

Importez les composants depuis @saas/ui dans n'importe quelle application :

// apps/app/src/pages/dashboard.tsx
import { Button, Card, CardContent } from "@saas/ui";

Le package est lié via le workspace pnpm -- aucune publication nécessaire.

Variantes et personnalisation

Les composants utilisent des classes Tailwind CSS et des variables CSS pour la thématisation. Personnalisez le système de design en modifiant :

/* packages/ui/src/globals.css */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --destructive: 0 84.2% 60.2%;
  --border: 0 0% 89.8%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  /* ... */
}

Ajouter de nouveaux composants

Créez le composant dans packages/ui/src/components/ :

// packages/ui/src/components/badge.tsx
import { cn } from "../lib/utils";

interface BadgeProps {
  variant?: "default" | "success" | "warning" | "error";
  children: React.ReactNode;
}

export function Badge({ variant = "default", children }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
        variant === "default" && "bg-primary/10 text-primary",
        variant === "success" && "bg-green-100 text-green-800",
        variant === "warning" && "bg-yellow-100 text-yellow-800",
        variant === "error" && "bg-red-100 text-red-800"
      )}
    >
      {children}
    </span>
  );
}

Exportez-le depuis packages/ui/src/index.ts :

export { Badge } from "./components/badge";

Utilisez-le dans n'importe quelle application :

import { Badge } from "@saas/ui";

<Badge variant="success">Active</Badge>

Mode sombre

Le mode sombre fonctionne automatiquement avec le ThemeProvider. Tous les composants respectent le thème actuel via les variables CSS.

Pour styliser conditionnellement en mode sombre avec Tailwind :

<div className="bg-white dark:bg-gray-900">
  <p className="text-gray-900 dark:text-gray-100">Adapts to theme</p>
</div>

Accédez au thème actuel de manière programmatique :

import { useTheme } from "@saas/ui";

const { theme, setTheme } = useTheme();
// theme: "light" | "dark" | "system"

Fini ? Marquez cette page comme terminée.

Composants UI

On this page