Components
you pick up, not install.
Beautiful, accessible components for PyBlade, in the spirit of shadcn/ui. Take the one you need, drop it into your templates, and make it yours.
hover the tray: each component lifts out of its pocket
The real components, live.
Every preview is rendered by PyBlade from the code you copy. Click, type, open: they work.
Make it your theme.
Tune every color, the radius and the shadows, in light and dark mode, on the real components. Start from Vercel, MUI, GitHub, Stripe… then copy the command or the theme.css.
Open the theme editorBuilt like a library. Owned like your code.
Everything you expect from a component system, without a dependency to keep up with.
The code is yours
Not a dependency: each component is copied into your components folder, ready to read, edit and extend.
Themes as CSS variables
shadcn-style tokens in OKLCH, with light and dark modes. 5 bases × 8 colors, plus your own variables.
Accessible by default
Keyboard navigation, visible focus and ARIA roles. Native fields stay native and post with the form.
Built for the server
PyBlade components with props and slots. Form errors with @error, Python data with tojson, sidebar state read from a cookie.
A complete CLI
pyblade-ui adds a component and its dependencies, shows your changes with diff, and switches themes in one command.
Ready-made blocks
An app shell with a sidebar, a login form: assembled from the same components, ready to copy and adapt.
Add it. Use it. Change it.
One command copies the component into your project. From then on it is a template like any other: no black box, no upgrade that breaks.
- 1Initialize the theme and tokens
- 2Add the components you need
- 3Use them in any template
pip install pyblade-ui
pyblade-ui init --base zinc --color blue
pyblade-ui add card switch button
# ✓ 3 components copied to components/ui<pb-ui.card class="max-w-md">
<pb-ui.card-header>
<pb-ui.card-title>Notifications</pb-ui.card-title>
</pb-ui.card-header>
<pb-ui.card-content class="flex items-center justify-between">
<pb-ui.label for="emails">Receive emails</pb-ui.label>
<pb-ui.switch id="emails" name="emails" checked />
</pb-ui.card-content>
<pb-ui.card-footer>
<pb-ui.button variant="outline">Save</pb-ui.button>
</pb-ui.card-footer>
</pb-ui.card>