PyBlade/ui
FREN
Menu⌄
DocsIntroduction

Introduction

Des composants beaux et accessibles, à copier dans votre projet PyBlade. Sur le modèle de shadcn/ui.

Le principe

PyBlade UI n'est pas une bibliothèque qu'on importe. La commande pyblade-ui add copie le code des composants dans votre projet. Le code vous appartient ensuite : vous le modifiez librement, sans attendre une nouvelle version.

Le code est à vous
Chaque composant est un template dans votre dossier components.
Thèmes en variables CSS
Format shadcn, OKLCH, Tailwind CSS v4, clair et sombre.
Un CLI complet
Ajouter, comparer, mettre à jour, changer de thème.

Démarrage rapide

pip install pyblade-ui
cd mon-projet-pyblade            # là où se trouve pyblade.toml
pyblade-ui init --base zinc --color blue
pyblade-ui add button card dialog

Puis utilisez-les dans n'importe quel template. Voir Installation pour le détail.

<pb-ui.card class="max-w-md">
  <pb-ui.card-header>
    <pb-ui.card-title>Équipe</pb-ui.card-title>
    <pb-ui.card-description>Invitez vos collègues.</pb-ui.card-description>
  </pb-ui.card-header>
  <pb-ui.card-content>
    <pb-ui.button variant="outline" class="w-full">Inviter</pb-ui.button>
  </pb-ui.card-content>
</pb-ui.card>

Composants

59 composants et 2 blocs, aujourd'hui.

Formulaires
Input
A text field.
Input group
An input with icons, text, buttons or a keyboard hint attached inside it.
Textarea
A multi-line text field that grows with its content.
Label
A label for a form control.
Field
A form field: label, control, description and error, wired to @error.
Select
A native select, styled.
Combobox
A select you can search, with keyboard navigation; its value is posted with the form.
Checkbox
A native checkbox, styled.
Radio group
A set of options where only one can be chosen, on native radios.
Switch
A toggle between on and off, on a native checkbox.
Slider
A range input, styled, with its filled track.
Input OTP
A one-time code input, one box per character, with paste support.
Calendar
A month grid to pick a date, localized, with min and max and arrow-key navigation.
Date picker
A button that opens a calendar; the chosen date is posted as YYYY-MM-DD.
Affichage
Card
A container with header, title, description, action, content and footer.
Item
A row of content: media, title, description and actions.
Badge
A small status label.
Avatar
An image with a fallback for the user.
Alert
A callout for important messages.
Empty
An empty state, with media, title, description and actions.
Kbd
A keyboard key or shortcut.
Spinner
A loading indicator.
Separator
A horizontal or vertical divider.
Skeleton
A placeholder while content loads.
Progress
A progress bar from 0 to 100.
Aspect ratio
Keeps its content at a given ratio.
Scroll area
A scrollable region with a thin, themed scrollbar.
Resizable
Panels you resize by dragging the handle between them, or with the arrow keys.
Typography
Text styles: headings, paragraph, lead, blockquote, list, inline code, and a prose wrapper for HTML content.
Installation ›