Kanban
Boards of lists and cards with labels, priorities, due dates, subtasks and assignees. Drag cards within and between lists.
Angular, spartan-ng and Tailwind CSSBuilt with Angular, spartan-ng and Tailwind CSS
The Angular admin template, built on a solid foundation.
Four dashboards, six apps and 40+ pages for Angular, built with spartan-ng and Tailwind CSS. Accessible, themeable and AI-ready, with every component in your repo, ready to change.
One-time payment · Full source code · Free updates
What's inside
- Dashboards
- 4
- Apps
- 6
- Pages
- 40+
- spartan-ng components
- 62
Built with
- Angular
- spartan-ng
- Tailwind CSS
- TypeScript
- Apache ECharts
- TanStack Table
- Lucide icons
Dashboards
Four dashboards, designed around real numbers.
Finance, Analytics, CRM and Project management, built from one set of cards and charts, with sample data that adds up across every card.
Apps
Six apps, ready to become yours.
Complete apps with real interactions, not screenshots of apps. Each one reads its data through a service you can point at your own API.
Chat
Direct and group conversations with unread counts, search and a composer.
Folders, labels and category tabs, a reading pane, reply, forward and compose.
Notes
A rich-text editor with headings, lists and quotes that saves as you type.
To-do
Tasks grouped by category, reordered and moved between categories by drag and drop.
File manager
Folders and files in a grid or list, with type filters, sorting, share, download and delete.
And every page around them
Data tables with filters and paging, settings, pricing, authentication in three layouts, error pages and the documentation, all in the same style.
- Products
- Customers
- Invoices
- Settings
- Pricing
- FAQ
- 18 auth pages
- Error pages
- Documentation
Theming
Make it yours in a few clicks.
Nine accent colours, five base colours, six corner radii and light and dark mode, all CSS variables in one file. Try them on the preview below: it is built from the template's own components and theme file.
Mode
Switches this whole page.
Accent colour · Violet
Base colour · Zinc
Radius
Every accent reaches 4.5:1 contrast as text and as a button colour, in light and dark mode.
Welcome back, Jordan
Here's how September is going
Revenue
$48,294
73% of the $66,000 target
Notifications
Orders this week
1,284
JE Jordan Ellisjordan.ellis@example.comSJ Sarah Johnsonsarah.johnson@example.comMC Michael Chenmichael.chen@example.com
Dark mode that is designed, not inverted.
Surfaces, charts, badges and avatars each have their own dark values, checked for contrast. The app follows the system setting until someone picks a theme. Drag the handle to compare.
For developers
Code you'll be glad to inherit.
One folder per feature, the same layout in every one, and comments where a buyer would ask why. Connecting your backend is an interface and a provider.
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideHttpClient(withFetch()),
// Products now come from your API instead of the mock.
{
provide: PRODUCTS_DATA_SERVICE,
useExisting: HttpProductsDataService,
},
],
};@Injectable({ providedIn: 'root' })
export class HttpProductsDataService implements ProductsDataService {
private readonly http = inject(HttpClient);
getProducts(query: ProductsQuery): Observable<ProductsPage> {
const params = new HttpParams()
.set('page', query.page)
.set('pageSize', query.pageSize)
.set('search', query.search);
return this.http.get<ProductsPage>('/api/products', { params });
}
deleteProduct(id: number): Observable<void> {
return this.http.delete<void>(`/api/products/${id}`);
}
// …the rest of ProductsDataService
}features/products/
├─ products.ts // The page
├─ products.routes.ts // Its routes
├─ products.columns.ts // The table's columns
├─ components/ // The add/edit sheet
├─ ui/ // Table cells and badges
├─ models/product.model.ts // The data types
├─ services/
│ ├─ products-data.service.interface.ts
│ ├─ products.token.ts // Mock or API: one provider
│ └─ products.service.ts // What components call
└─ mock/
├─ products-mock.data.ts
└─ products-mock-data.service.tsAI-ready
The project ships with rules for AI coding agents: how a feature is laid out, how data flows, and the styling and accessibility conventions. Cursor, Codex and Claude Code pick them up on their own, so the code they write fits in.
- AGENTS.md
- CLAUDE.md
- .cursor/rules
Components you own
All 62 spartan-ng components live in libs/ui as plain source. Restyle or extend them like your own code.
Mock data today, your API tomorrow
Each feature reads through an interface behind an injection token. Swap one provider to go live.
Modern Angular
Zoneless, with standalone components, signals, the built-in control flow and a lazy-loaded route for every feature.
Charts on demand
Apache ECharts downloads with the first chart, and shared builders keep every chart consistent in both themes.
Tables that scale
TanStack Table with sorting, filters, selection and paging, the page in the URL, and loading rows that keep the layout still.
Documentation built in
Setup, theming, components, the data layer and updating, one click away inside the app.
Every screen
Browse the pages, in light and dark.
Here are 29 of the template's 40+ pages. They follow this page's theme, and the live preview has every one.
Responsive
Just as good in your pocket.
Every page works from a wide monitor down to a phone. The sidebar slides in from the edge, dashboard cards stack into one column and boards scroll sideways, in both themes.
Pricing
Simple, one-time pricing.
Pay once and keep the full source code, with free updates. Pick the licence that matches how you'll use it.
Personal
One developer building one product, for yourself or a client.
$59one-time
- 1 developer
- 1 end product
- Personal and client projects
- Email support
Team
Studios and product teams shipping more than one app.
$149one-time
- Up to 5 developers
- Unlimited end products
- Personal and client projects
- Priority email support
Extended
Products your users pay for, including SaaS.
$349one-time
- Unlimited developers
- Unlimited end products
- Paid products and SaaS
- Priority email support
By buying, you agree to the terms, the licence and the refund policy, with its 14-day money-back guarantee.
Every licence includes
- 4 dashboards, 6 apps and 40+ pages
- 62 spartan-ng components as source
- Theme customiser, light and dark
- Documentation built into the app
- Free updates
- Try the live preview first
Prices in US dollars, or in euros in the EU, where they include VAT. US sales tax is added at checkout where it applies. Orders are processed by Paddle.com, our reseller and merchant of record.
FAQ
Questions, answered.
What buyers usually ask before they start.
Something else? hello@themelui.com
The complete Angular project that runs the live preview: every dashboard, app and page, the 62 spartan-ng components in libs/ui, the mock data services, the documentation that is built into the app, and rules for AI coding agents.
Angular 22 with TypeScript 6, spartan-ng 1.5, Tailwind CSS 4, Apache ECharts 6 and TanStack Table 8. You need Node.js 22.22.3 or later, 24.15 or later, or 26 and above.
No. If you know Angular and Tailwind CSS you'll feel at home. spartan-ng is the Angular port of shadcn/ui: its brain package handles focus, keyboard support and ARIA, and the styled helm components are ordinary source files in your project that you change like your own.
Each feature reads its data through a small interface behind an injection token and ships with a mock implementation. Write a class that implements the interface with HttpClient, provide it in place of the mock, and the components never know. The documentation walks through it with Products.
Yes, it's AI-ready. AGENTS.md describes how the template is written: the folder layout, the data layer, the component, styling and accessibility conventions, and how to check a change. Codex and Cursor read it on their own and Claude Code through CLAUDE.md, with more detailed rules for tables, charts, theming and the other areas in .cursor/rules. Your assistant writes code that matches the template instead of guessing.
Colours, radius and fonts are CSS variables in one file, written in OKLCH. The theme customiser offers light and dark mode, nine accent colours, five base colours, six corner radii and three sidebar layouts. To ship one fixed theme, copy its values into theme.css and remove the customiser.
It aims for WCAG 2.2 AA. Every accent colour reaches 4.5:1 contrast as text and as a button colour in both modes, chart colours are ordered to stay distinguishable for colour-blind readers, and spartan-ng's brain primitives provide keyboard support and ARIA for menus, dialogs, selects and the rest.
It builds to a static site, so any static host can serve it: Netlify, Vercel, Cloudflare Pages, S3 or your own nginx, as long as unknown paths fall back to index.html.
Personal covers one product for you or one client. Team covers unlimited products and up to five developers. If your users pay to use what you build, a SaaS for example, choose Extended.
New versions are free with every licence. Keep the template on its own git branch and merge each release into your app; the documentation shows how.
Start your next admin on a solid foundation.
Click through every page in the live preview, then take the whole project home.