# App and Dashboard Templates

> Working web app interfaces you deploy as the product: a team chat shell, a six-page documentation site, and a draggable dashboard. Static HTML, no framework.

Canonical: https://gsapvault.com/templates/category/app-ui

Working interfaces rather than marketing pages about interfaces. Deploy them as the product front end, drive a demo with them, or use one as proof you can build real UI.

## Interfaces you can ship, not screenshots of interfaces

Most app templates are landing pages with a picture of an app on them. These are the app. The team chat template is a complete dark-mode chat shell with a workspace rail, a channel and DM sidebar carrying presence dots and unread badges, a message pane with hover toolbars and reactions, a composer, and a thread panel that opens on the right.

Its signature is that the conversation plays itself. A choreographed GSAP replay of launch morning runs typing indicators, landing messages, popping reactions, a mention sweep and a thread opening on cue, which makes it unusually good as a living hero screenshot embedded in an iframe on a marketing page, or as the backdrop for a product demo video.

The documentation template is a documentation site you deploy as your documentation site. Six cross-linked pages on a clean reading surface, with a proper dark theme and a slate alternate as one-attribute palette swaps, a sidebar tree, a scrollspy rail, and a command palette that fuzzy-searches an index read live from the navigation and the current page headings. Every docs pattern you would otherwise build from scratch is already in it, including tabbed install blocks, file trees, options tables and callouts.

The dashboard template rounds the group out with draggable, keyboard-reorderable widgets, expandable release rooms and split-flap metrics, on a restrained palette that reads as operational software rather than a collection of decorative cards. Its keyboard reordering is a genuine alternative path, not a token one.

## How to use an app template as a real interface

These are front ends with complete state and no backend, which makes them fast to wire into something real or to run as a self-contained demo.

1. **Decide whether it is the product or the demo:** Deploying it as your docs or your dashboard means wiring data in. Using it as a demo means editing the scripted content and leaving the rest alone. The work is very different, so choose first.
2. **Replace the seeded content:** Channels, messages, pages and widgets are declared as data near the top of the script or as markup. Swap in your own and the interactions keep working.
3. **Connect data where you need it live:** The rendering is separated from the seeded state, so pointing a list at a fetch call or a websocket is a local change rather than a rewrite.
4. **Keep the keyboard paths:** Reordering, palette search and panel navigation all work from the keyboard. If you extend the UI, extend those too; it is the part most app templates never had in the first place.

```css
const channels = [
  { id: 'launch', name: 'pack-launch', unread: 3, presence: 'active' },
  { id: 'design', name: 'design-crit', unread: 0, presence: 'idle' },
];
```

## App & dashboard UI at a Glance

| Template | What it does | Built with | Tone |
| --- | --- | --- | --- |
| [AI Studio SaaS Template](https://gsapvault.com/templates/ai-studio-saas-template) | A saturated editorial SaaS template with an aperture-led type hero, a scroll-directed visual sequence, and a clickable art-direction mixer. | ScrollTrigger | dark |
| [Team Chat App Template](https://gsapvault.com/templates/team-chat-template) | A dark-mode team chat web-app UI whose conversation plays itself: a choreographed GSAP replay of launch morning with typing indicators, landing messages, popping reactions, a mention sweep and a thread that opens on cue, inside a full app shell with channel switching, a composer and a mobile drawer. | GSAP core | dark |
| [Documentation Site Template](https://gsapvault.com/templates/documentation-template) | A complete six-page documentation site on a clean near-white reading surface, with a proper dark theme and a cool slate alternate shipped as one-attribute palette swaps: fixed top bar, cross-linked sidebar tree, article column and scrollspy "On this page" rail on every page, built around a Cmd+K command palette that fuzzy-searches an index read live from the site's navigation and the current page's headings. | ScrollTrigger | light |
| [Draggable Dashboard Template](https://gsapvault.com/templates/bento-grid-template) | A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics. | ScrollTrigger, Flip, Draggable | dark |

## Templates in This Category

### AI Studio SaaS Template

A saturated editorial SaaS template with an aperture-led type hero, a scroll-directed visual sequence, and a clickable art-direction mixer.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/ai-studio-saas-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/ai-studio-saas-template.md)

### Team Chat App Template

A dark-mode team chat web-app UI whose conversation plays itself: a choreographed GSAP replay of launch morning with typing indicators, landing messages, popping reactions, a mention sweep and a thread that opens on cue, inside a full app shell with channel switching, a composer and a mobile drawer.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/team-chat-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/team-chat-template.md)

### Documentation Site Template

A complete six-page documentation site on a clean near-white reading surface, with a proper dark theme and a cool slate alternate shipped as one-attribute palette swaps: fixed top bar, cross-linked sidebar tree, article column and scrollspy "On this page" rail on every page, built around a Cmd+K command palette that fuzzy-searches an index read live from the site's navigation and the current page's headings.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/documentation-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/documentation-template.md)

### Draggable Dashboard Template

A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/bento-grid-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/bento-grid-template.md)

## Related Guides

- [54 animated website templates built with GSAP (2026)](https://gsapvault.com/blog/interactive-website-templates) ([Markdown](https://gsapvault.com/blog/interactive-website-templates.md)): 54 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.
- [66 GSAP animation examples with code (2026)](https://gsapvault.com/blog/gsap-animation-examples) ([Markdown](https://gsapvault.com/blog/gsap-animation-examples.md)): 66 production-ready GSAP animation examples with code: scroll, text, cursor, and canvas effects. Eight are completely free with copy-paste snippets below.
- [GSAP performance: why animations get janky and how to fix it](https://gsapvault.com/blog/gsap-performance-guide) ([Markdown](https://gsapvault.com/blog/gsap-performance-guide.md)): A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

## Frequently Asked Questions

### Are these connected to a backend?

No. They are complete front ends with real state, keyboard support and accessibility work done, but no server. That is what makes them useful as demos out of the box and straightforward to wire into your own API when you need live data.

### Can I embed the chat template in a marketing page?

Yes, and it is one of the better uses for it. Embedded in an iframe it gives you a hero screenshot that moves and keeps moving, without recording a video that goes stale the next time your UI changes.

### Is the documentation template a static site generator?

No, and that is deliberate. It is six hand-authored HTML pages sharing one stylesheet and one script, so there is no framework to learn or upgrade. If you later want a generator, the markup ports cleanly into one.

### Do these work on mobile?

Yes. The chat template has a mobile drawer, the documentation sidebar collapses, and the dashboard reflows its widgets. Dragging falls back to keyboard and tap interactions where a drag would not make sense on a small screen.

## Related Categories

- [Landing Page Templates](https://gsapvault.com/templates/category/landing-marketing)
- [Portfolio Website Templates](https://gsapvault.com/templates/category/portfolio-personal)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt