U
UIPKGE
/
styles
Files
Code
Info
Motion preset — animated sortable lists
motion-list
Drop-in transition styles for sortable lists, kanban columns, and reorderable cards. The enter/leave/move class convention pairs with any list-animation layer that toggles `motion-list-*` classes — siblings reflow smoothly while items fade-and-scale on enter/leave. Leaving items are taken out of layout flow (position: absolute) so the parent collapses immediately instead of waiting for the leave fade. All four timings and the settle curve are CSS variables (`--motion-list-curve`, `--motion-list-duration-{enter,leave,move}`, `--motion-list-leave-width`) so consumers tune per-context with one line. Consumed by `@uipkge/board` by default; usable standalone for any reorderable list. Tiny — one .css file, zero JS.
Tailwind v4 OKLCH tokens
tailwind
Tailwind v4 design tokens (light + dark), motion tokens, base layer styling, and shadow utilities. Identical token set to the Vue/Nuxt registry — tokens are framework-neutral. Ships the full canonical tailwind.css as `files` content; the cssVars block stays as a merge safety net for consumers with a pre-existing globals.css.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Motion preset — animated sortable lists
motion-list
Drop-in transition styles for sortable lists, kanban columns, and reorderable cards. The enter/leave/move class convention pairs with any list-animation layer that toggles `motion-list-*` classes — siblings reflow smoothly while items fade-and-scale on enter/leave. Leaving items are taken out of layout flow (position: absolute) so the parent collapses immediately instead of waiting for the leave fade. All four timings and the settle curve are CSS variables (`--motion-list-curve`, `--motion-list-duration-{enter,leave,move}`, `--motion-list-leave-width`) so consumers tune per-context with one line. Consumed by `@uipkge/board` by default; usable standalone for any reorderable list. Tiny — one .css file, zero JS.
Tailwind v4 OKLCH tokens
tailwind
Tailwind v4 design tokens (light + dark), motion tokens, base layer styling, and shadow utilities. Identical token set to the Vue/Nuxt registry — tokens are framework-neutral. Ships the full canonical tailwind.css as `files` content; the cssVars block stays as a merge safety net for consumers with a pre-existing globals.css.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information