Pentatrion Design System

Prérequis

Créez un nouveau projet Vite + React v19 + TailwindCSS v4. Official doc

1pnpm create vite my-app
2
3# 1. React
4# 2. TypeScript + SWC
5
6cd my-app
7
8# dépendances
9pnpm add -D tailwindcss @tailwindcss/vite prettier-plugin-tailwindcss
10
11pnpm add pentatrion-design clsx class-variance-authority

Supprimer les fichiers inutiles

.
└── src
    ├── App.tsx
    ├── index.css
    ├── main.tsx
    └── vite-env.d.ts

Configuration de vite

1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react-swc";
3import tailwindcss from "@tailwindcss/vite";
4
5export default defineConfig({
6  plugins: [react(), tailwindcss()],
7});

Mettre à jour le fichier src/index.css

Configuration recommandée

1/* src/index.css */
2@import "tailwindcss";
3
4@source "../node_modules/pentatrion-design/dist/components";
5@source "../node_modules/pentatrion-design/dist/hooks";
6
7@import "pentatrion-design/tailwind";
8
9/* facultatif */
10@import "pentatrion-design/tailwind/prose.css";
11
12html {
13  font-size: 16px;
14  line-height: 24px;
15  color-scheme: normal;
16}
17body {
18  @apply bg-gray-0 text-gray-7 font-sans;
19}

si on désire plus de contrôle sur nos imports

1/* src/index.css */
2@import "tailwindcss";
3
4@source "./node_modules/pentatrion-design/dist/components";
5
6@import "pentatrion-design/tailwind/theme.css";
7@import "pentatrion-design/tailwind/variants.css";
8@import "pentatrion-design/tailwind/utilities.css";
9@import "pentatrion-design/tailwind/base.css" layer(base);
10@import "pentatrion-design/tailwind/components/index.css" layer(components);
11
12@import "pentatrion-design/tailwind/prose.css";

1// .prettierrc
2{
3  "plugins": ["prettier-plugin-tailwindcss"]
4}

La dépendance pentatrion-fonts est optionnelle.

Mettre à jour src/App.tsx

1import { Button } from "pentatrion-design/button";
2
3import { useState } from "react"
4
5function App() {
6  const [counter, setCounter] = useState(0);
7
8  return (
9    <div className="flex flex-col gap-2 items-center">
10      <h1 className="text-gray-6">Vite + React</h1>
11      <Button onClick={() => setCounter(c => c + 1)}>Click me !</Button>
12      <p>{counter}</p>
13    </div>
14  )
15}
16
17export default App

VsCode

Create a .vscode/settings.json file

1{
2  "files.associations": {
3    "*.css": "tailwindcss"
4  }
5}

Inclure le design-system dans un autre projet sans dépendance npm

fichier tsconfig.json.

1{
2  "compilerOptions": {
3    "paths": {
4      "pentatrion-design/*": ["./*"]
5    },
6  }
7}