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.

Name

Email

Change Password

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

Current Password

New Password

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.