Interactive Components

Tabs

Organize content into separate views where only one view is visible at a time.

Account Settings

Make changes to your account here. Click save when you're done.

Change Password

Update your password here. After saving, you'll be logged out.

Notification Settings

Configure how you receive notifications.

Email Notifications
Receive email updates
Push Notifications
Receive push notifications

Accordion

Collapsible content sections for organizing information.

The ATXP Design System is a comprehensive collection of reusable components, design tokens, and guidelines that help teams build consistent and accessible user interfaces quickly.
You can install the design system using npm or yarn:

npm install @atxp/design-system

Then import the CSS in your application.
Yes! The design system supports multiple themes (light, dark, ATXP, DBG) and you can easily create custom themes by defining CSS variables. All theme tokens use CSS custom properties for maximum flexibility.
Absolutely! All components are built with accessibility in mind, following WAI-ARIA guidelines. Components include proper ARIA labels, keyboard navigation, focus management, and screen reader support.

Progress

Visual indicator showing task completion.

Uploading... 25%
Processing... 60%
Complete! 100%
Simulated Progress 0%

Skeleton

Loading placeholders for content.

Card Skeleton

List Skeleton