UI kits on .jsk without shipping React
· 2 dk okuma
Teams often ask whether JSkelet can look like modern admin kits (quiet zinc UI, predictable buttons, sidebar navigation) without adopting React. Yes — if you separate visual language from runtime.
Two different requests
- “Make it look like shadcn.” → CSS tokens, spacing, focus rings, composition.
- “Install shadcn/ui.” → React, Radix primitives, a client component graph.
JSkelet optimises for (1) on content and admin HTML. It does not ship (2). Trying to force (2) onto public pages undoes the framework’s reason to exist.
A pattern that works
Scoped tokens in a page stylesheet (for example admin-only CSS loaded via styles: ["panel.css"]). Define --background, --primary, --sidebar, --destructive, and friends. Activate them with a body or root class so marketing brand tokens stay untouched.
Primitive classes for buttons, cards, alerts, badges, inputs, tables, and tabs. Prefer semantic class names over fifty one-off utility stacks in every template.
Server helpers under views/components that return HTML strings (PanelButton, PanelCard, …). Templates call PascalCase tags; forms keep name/value/type for real POSTs.
No island required for the first pass of an admin shell. Add islands later for menus or pickers that truly need JS.
Accessibility baselines
- Real
<button>and<a>elements - Visible
focus-visiblerings using--ring - Labels tied to controls
- Destructive actions that are obvious without colour alone
Radix helps when you need complex dialing for focus traps. Most CMS screens are forms and tables — HTML already knows how to do those.
Sharing design language with marketing
Keep public marketing aesthetics separate from admin chrome. Cyan glass panels may sell the framework story; zinc quiet UI helps editors work. JSkelet’s page stylesheets make that split easy.
When you might still use React
A heavily interactive design tool embedded in an admin might justify an island that mounts React for that rectangle alone. That is an escape hatch, not the default for every button. Document the exception so the next engineer does not “just add React” to the login form.
JSkelet’s pitch stays intact: complete HTML, selective JavaScript, CSS for look and feel. You can have a contemporary admin aesthetic without pretending the admin is a SPA.
Yorumlar
Henüz yorum yok.