Application Shell blocks

App layouts: a sidebar, a collapsible rail and top navigation, with landmarks and a mobile menu.

3 variants. Every block is one file built from CK-UI components and works in light and dark mode.

Sidebar shell

A sidebar with grouped links and the current page, a header with search and account, and a drawer menu on small screens.

Full preview

CK-UI components

Also copy the files they import: Field, Label, ThemeScope.

npm packages

npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-slot class-variance-authority framer-motion react-icons

Collapsible sidebar shell

A sidebar that collapses to a rail of named icon links, with a drawer menu on small screens.

Full preview

CK-UI components

Also copy the files they import: ThemeScope.

npm packages

npm install @radix-ui/react-dialog @radix-ui/react-slot @radix-ui/react-tooltip class-variance-authority react-icons

Top navigation shell

Horizontal navigation with the current page, breadcrumbs and a page header; the links fold into a menu on small screens.

Full preview

CK-UI components

Also copy the files they import: ThemeScope.

npm packages

npm install @radix-ui/react-dropdown-menu @radix-ui/react-slot class-variance-authority framer-motion react-icons