Atlas Workspace Console UI Kit
A sleek creative-operations console with four animated workspace views, sortable data tables, Kanban planning, scheduling, team capacity, command search and layered popovers.
About This Kit
A sleek workspace console that sits between a complete SaaS template and a reusable component kit. Atlas combines four animated application views and more than eighteen extractable modules on a restrained light-first system: monochrome controls, precise borders, quiet surfaces and small semantic colour signals that can adapt to almost any product.
Read the full effect overview
The signature project inspector uses GSAP Flip to carry a selected project from the delivery board into a persistent detail surface, then returns it without stale geometry. Animated page switching connects overview, portfolio, schedule and people views, while sortable tables, Kanban layout switching, filters, bulk actions, charts, approvals, command search and layered popovers make the assembled demo a serious application foundation.
What's Included
- More than eighteen coordinated workspace components driven by one role-based token file
- Neutral light theme by default with an optional ink theme from one root attribute
- Four animated application views with restrained page transitions and responsive navigation
- Four count-up metric cards with restrained trend treatments
- Workload curve with keyboard-operable 7d, 30d and 90d range controls
- Filterable delivery board with Flip reordering and a reusable project inspector
- Desktop side inspector that becomes a mobile bottom sheet, with focus trap and return
- Team capacity, approval queue and live activity components with complete empty and action states
- Cmd/Ctrl+K command palette with filtering, arrow-key navigation and live result counts
- Sortable portfolio data table with search, status filters, selection and bulk actions
- Animated table-to-Kanban layout switching with complete project states
- Full weekly schedule, event cards, agenda and team roster surfaces
- Workspace, create and notification popovers with keyboard-safe dismissal
- Shared toast feedback, reduced-motion end states and touch-safe controls
Perfect For
- Creative agencies coordinating projects, reviews and launch dates
- SaaS workspaces that need a complete light-mode dashboard foundation
- Client portals combining delivery status with team capacity
- Internal operations tools that should feel calm rather than technical
How It Works
One calm design system
Every surface, ink colour, shadow, radius, spacing step and motion duration comes from tokens.css. Components consume role names rather than palette values, so the optional ink theme and any buyer re-skin require no component-level overrides or JavaScript branches.
A project moves into focus
The delivery board captures state with Flip.getState(), moves the selected project's identity into the inspector, and animates both the source layout and destination with Flip.from(). Closing reverses the relationship, restores focus and clears all temporary inline state so a second open is identical to the first.
Complete interaction contracts
The command palette and project inspector share a refcount-safe layer manager, trap focus, close from Escape and return focus to their trigger. Range controls use roving tabindex, live changes are announced, and reduced motion keeps every interaction while collapsing animation durations.
