1.0.1 • Published 7 months ago
@aurthle/react-layout-kit v1.0.1
✨ Introduction
@aurthle/react-layout-kit est une collection de composants de layout flexibles, minimalistes et accessibles, conçus pour créer rapidement des interfaces modernes en React.
Inspiré de la simplicité de Tailwind, combiné à la puissance des primitives orientées composant.
🚀 Installation
pnpm add @aurthle/react-layout-kit
# ou
npm install @aurthle/react-layout-kit
# ou
yarn add @aurthle/react-layout-kit🧩 Composants inclus
| Composant | Description |
|---|---|
Flex | Un conteneur flex simple avec gap, align, justify, wrap, etc. |
Grid | Grille CSS avec support des colonnes/rangées personnalisées. |
Spacer | Composant d'espacement réactif entre deux blocs. |
Center | Pour centrer facilement un élément horizontalement et verticalement. |
Box | Un conteneur générique stylable avec padding, margin, etc. |
FlexBasic | Variante plus bas niveau de Flex sans logique intégrée. |
Flexbox | Flexbox étendu avec gestion automatique de la direction. |
🔧 Exemple d’utilisation
import { Flex, Spacer, Box } from '@aurthle/react-layout-kit';
export default function Example() {
return (
<Flex direction="row" align="center" gap="4">
<Box style={{ background: '#eee', padding: '1rem' }}>Bloc A</Box>
<Spacer size="4" />
<Box style={{ background: '#ddd', padding: '1rem' }}>Bloc B</Box>
</Flex>
);
}⚙️ Props supportées
Tous les composants acceptent :
classNamestyle- Props spécifiques au layout (
gap,align,justify,wrap, etc.)
⚠️ Compatible avec Tailwind, Shadcn et toutes les UI libs React.
📦 Packages liés
| Package | Description |
|---|---|
@aurthle/emoji-hub | Composants d'emoji multi-source (Apple, Fluent, etc.) |
@aurthle/react-hooks | Hooks React réutilisables et prêts à l’emploi |
📄 License
MIT — © Aurthle
📚 Ressources
🛠 Maintenance
Ce package est auto-généré à partir d’un design system Figma propriétaire. Pour signaler un bug ou suggérer une amélioration, merci d’ouvrir une issue sur GitHub. Les contributions directes via PR sont désactivées pour ce module.