The theme and the components under every block

Cool grey page, white cards, black buttons and a blue accent. Rounded and friendly.

Files

your CSS file

Uses

@fontsource-variable/inter, @fontsource-variable/jetbrains-mono, @fontsource-variable/space-grotesk

What Tailwind needs to read a theme: utilities for the brand, success, warning and sidebar indicator colors, the display font, radius and shadows from the theme, raised dialogs, and a dark variant that light previews can turn off.

Files

your CSS file

An alert dialog that asks before a destructive action, with or without its own trigger.

Files

components/pixikit/confirm-dialog.tsx

Uses

alert-dialog, spinner

A button that copies a value and shows a check once it has.

Files

components/pixikit/copy-button.tsx

Uses

button, lucide-react

A strip pinned to the top of the page. Banners stack, and publish their height as --sticky-top for the layout below.

Files

components/pixikit/sticky-banner.tsx

Applies the theme, light or dark mode and a custom brand color and radius, saved per person, with a script that runs before paint.

Files

components/pixikit/theme-provider.tsx

A menu and a toggle for light, dark or system mode and for the theme.

Files

components/pixikit/theme-switcher.tsx

Uses

button, dropdown-menu, toggle-group, lucide-react

Pick a brand color and a corner radius on top of a theme, with a contrast warning.

Files

components/pixikit/theme-customizer.tsx

Uses

button, field, slider, toggle-group, lucide-react

A small mock of an app in a given theme and mode, for pickers.

Files

components/pixikit/theme-preview.tsx

The components on one page, in whatever theme surrounds them.

Files

components/pixikit/design-showcase.tsx

Uses

accordion, alert, alert-dialog, avatar, badge, breadcrumb, button, button-group, card, chart, checkbox, dialog, dropdown-menu, empty, field, input, input-group, item, kbd, pagination, popover, progress, radio-group, select, separator, sheet, skeleton, slider, spinner, switch, table, tabs, textarea, tooltip, lucide-react, recharts, sonner

A sticky banner for a public demo: switch theme and mode from the top of the page.

Files

components/pixikit/demo-bar.tsx

Uses

button, popover, tabs, lucide-react

Dates, relative times, file sizes and money, formatted one way.

Files

lib/pixikit/format.ts

Brand, success and warning class names for Badge and Alert.

Files

lib/pixikit/status.ts

The link type blocks accept, the active entry of a navigation, and initials for an avatar.

Files

lib/pixikit/link.ts

The theme list and types, and the CSS variables a brand color and radius set.

Files

lib/pixikit/themes.ts, lib/pixikit/theme-list.ts

The theme in light and dark with a trial brand color and radius, the result as token values or CSS, and a component lab.

Files

components/pixikit/theme-playground.tsx

Uses

tabs

Every block with sample data, by category: the catalogue a gallery reads, one demo per block, and all of them on one page.

Files

components/pixikit/block-showcase.tsx, components/pixikit/block-showcase-kit.tsx, components/pixikit/block-showcase-core.tsx, components/pixikit/block-showcase-navigation.tsx, components/pixikit/block-showcase-headings.tsx, components/pixikit/block-showcase-data.tsx, components/pixikit/block-showcase-boards.tsx, components/pixikit/block-showcase-lists.tsx, components/pixikit/block-showcase-forms.tsx, components/pixikit/block-showcase-inputs.tsx, components/pixikit/block-showcase-feedback.tsx, components/pixikit/block-showcase-pages.tsx

Uses

avatar, badge, breadcrumb, button, card, checkbox, field, input, input-group, radio-group, select, skeleton, spinner, switch, tabs, textarea, toggle-group, @tanstack/react-table, lucide-react, sonner