Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
SwiftUI
Package maturity: stable · Implementation verification: Experimental
Jetpack Compose
Package maturity: stable · Implementation verification: Experimental
Flutter
Package maturity: stable · Implementation verification: Experimental
This platform’s whole catalogue is verified to React beta, SwiftUI experimental, Jetpack Compose experimental, Flutter experimental. The catalogue figure is the weakest component on that platform, not an average.
A composable, themeable and customizable sidebar — uses --sidebar-* tokens.
Reduced motion: off · your browser setting
Sidebar is a full-page layout primitive (SidebarProvider + SidebarInset). See the code tab for a minimal shell; it themes from the --sidebar-* tokens.npx @kinetixui/cli add sidebarimport { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger, SidebarInset } from "@kinetixui/ui";Styled entirely from the KinetixUI token contract — bg-action,
text-muted-foreground, border-input, ring-ring. Works in light and dark
with no extra config. Keyboard and ARIA behaviour is inherited from Radix where the
component is built on a primitive; the hand-built widgets (DataGrid, TreeView,
ColorPicker, MultiSelect, Tour, KanbanBoard) have their own documented interaction
models — see Accessibility.
The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| collapsible | "none" | "icon" | "offcanvas" | |
| variant | "inset" | "sidebar" | "floating" | |
| side | "left" | "right" |
| Prop | Type | Notes |
|---|---|---|
| asChild | boolean |
| Prop | Type | Notes |
|---|---|---|
| state | "Default" | "Focus" | "Disabled" | "Error" | null | |
| corners | "default" | "sharp" | "pill" | "rounded" | nullcorner style — matches the design source's Corners property | corner style — matches the design source's Corners property |
| Prop | Type | Notes |
|---|---|---|
| tooltip | string | (Omit<TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) | |
| asChild | boolean | |
| variant | "default" | "outline" | null | |
| size | "default" | "sm" | "lg" | null | |
| isActive | boolean |
| Prop | Type | Notes |
|---|---|---|
| showIcon | boolean |
| Prop | Type | Notes |
|---|---|---|
| defaultOpen | boolean | |
| open | boolean | |
| onOpenChange | ((open: boolean) => void) |
| Prop | Type | Notes |
|---|---|---|
| asChild | booleanrender as the single child element (Radix Slot) instead of <button> | render as the single child element (Radix Slot) instead of <button> |
| variant | "Primary" | "Secondary" | "Outline" | "Destructive" | "Ghost" | "Link" | null | |
| size | "sm" | "md" | "lg" | "icon" | null | |
| state | "Default" | "Hover" | "Focus" | "Active" | "Disabled" | nullforce a static visual state — leave undefined for real interaction | force a static visual state — leave undefined for real interaction |
| corners | "default" | "sharp" | "pill" | nullcorner style — matches the design source's Corners property | corner style — matches the design source's Corners property |