Blocks

Whole pages and sections built from the components: copy one into your app with the CLI, route to it, and make it yours. Each one compiles with mock data, so you swap in your own when you're ready.

Dashboard 01

A dashboard of stat cards, an area chart and a table of recent orders.

Uses: Badge,
Button,
Card,
Chart,
Skeleton,
Table,
Toggle Group
Installs: @lucide/angular@^1.50.0, @ndop/core, @ndop/primitives

Dashboard 02

An analytics dashboard with tabs for overview, reports and notifications.

Uses: Avatar,
Badge,
Button,
Card,
Chart,
Skeleton,
Table,
Tabs
Installs: @lucide/angular@^1.50.0, @ndop/core, @ndop/primitives

Settings 01

A settings page with profile and account forms.

Uses: Avatar,
Button,
Card,
Form Field,
Input,
Label,
Radio Group,
Select,
Separator,
Textarea
Installs: @lucide/angular@^1.50.0, @ndop/core, @ndop/primitives

Settings 02

A settings page of notification switches and a danger zone.

Uses: Alert Dialog,
Button,
Card,
Form Field,
Radio Group,
Separator,
Switch
Installs: @lucide/angular@^1.50.0, @ndop/core, @ndop/primitives

Data Table 01

A table of tasks to search, filter, sort, page through and select, with actions per row.

Uses: Badge,
Button,
Checkbox,
Data Table,
Dropdown Menu,
Input,
Label,
Select,
Skeleton,
Table
Installs: @lucide/angular@^1.50.0, @ndop/core, @ndop/primitives

Hero 01

A hero section with a headline, two actions and a product shot.

Uses: Badge,
Button
Installs: @lucide/angular@^1.50.0, @ndop/core, @ndop/primitives

Pricing 01

Pricing plans with a monthly or yearly billing toggle.

Uses: Accordion,
Badge,
Button,
Card,
Toggle Group
Installs: @lucide/angular@^1.50.0, @ndop/core, @ndop/primitives