PyBlade/ui
FREN
Menu⌄
DocsIntroduction

Introduction

Beautiful, accessible components to copy into your PyBlade project. In the spirit of shadcn/ui.

The idea

PyBlade UI is not a library you import. The pyblade-ui add command copies the components' code into your project. From then on the code is yours: change it as you like, without waiting for a new release.

The code is yours
Every component is a template in your components folder.
Themes as CSS variables
shadcn format, OKLCH, Tailwind CSS v4, light and dark.
A complete CLI
Add, compare, update, switch themes.

Quick start

pip install pyblade-ui
cd my-pyblade-project            # where pyblade.toml is
pyblade-ui init --base zinc --color blue
pyblade-ui add button card dialog

Then use them in any template. See Installation for the details.

<pb-ui.card class="max-w-md">
  <pb-ui.card-header>
    <pb-ui.card-title>Team</pb-ui.card-title>
    <pb-ui.card-description>Invite your colleagues.</pb-ui.card-description>
  </pb-ui.card-header>
  <pb-ui.card-content>
    <pb-ui.button variant="outline" class="w-full">Invite</pb-ui.button>
  </pb-ui.card-content>
</pb-ui.card>

Components

59 components and 2 blocks, today.

Forms
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.
Display
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 ›