Athenic Provider
Open your Browsers DevTools to inspect the Provider
Headers
Athenic UI - H1
Athenic UI - H2
Athenic UI - H3
Buttons
Size
Colors
With icon
With link
Disabled
Icon Button
All Icons
Icons by Font AwesomeBadges
Tint
primary
secondary
tertiary
success
warning
error
Solid
primary
secondary
tertiary
success
warning
error
Spinner
Variants
Size
Custom Speed
Card
Size
Example
Athenic UI - Login
Link
Standard
This is a simple Link to the Athenic UI Github-Repo.
Target new Tab
Here is another sample Link.
Counter
Size
484848484848Duration
48483754With prefix
$ 4848€ 4848With suffix
4848 Users4848 satisfied customersWith delay
0Collapse
Tab 1
Content of Tab 1
Tab 1
Content of Tab 1
Tab 2
Content of Tab 2
Tab 3
Content of Tab 3
Tab 4
Content of Tab 4
With initial opened
Tab 1
Content of Tab 1
Tab 2
Content of Tab 2
Tab 3
Content of Tab 3
Nesting Elements in Collapse
Tab 1
Tab 2
Content of Tab 2
Tab 3
Content of Tab 3
Combined with Card
Tab 1
Tab 2
Content of Tab 2
Tab 3
Content of Tab 3
Stepper
Horizontal
1
Sign Up
2
Verify your Account
3
Complete registration
Sign Up
2
Verify your Account
3
Complete registration
Sign Up
Verify your Account
3
Complete registration
Sign Up
Verify your Account
Complete registration
Vertical
1
Add personal info
2
Add payment details
3
Complete payment
Add personal info
2
Add payment details
3
Complete payment
Add personal info
Add payment details
3
Complete payment
Add personal info
Add payment details
Complete payment
Combined with Card
💳 Payment Process
Add personal info
Add payment details
3
Complete payment
Example with React states
Register
1
Add personal info
2
Verify your E-Mail
3
Complete Registration
Rating
Size
Initial Rating
onRate Event
0 / 5Emoji
0 / 5Modal
Position bottomLeft
Position bottomRight
Avatar
Size
Notifications
41099+Link
4Comment
Behemoth
Made with ❤️ by... well me ;)
666Reply
With replies
Multiply nested
Alert
Variants
Success
Info
Warning
Error
Without icon
Success
Info
Warning
Error
With description
Success
Info
Warning
Error
With close icon
Success
Info
Warning
Error
With React states
Payment successful!
Text Input
With Placeholder
Disabled
Invalid
With Label
With Validation-Message
Please enter a valid E-Mail
Password
Search Input
Disabled
With Validation-Message
Please enter a valid search term!
onSearch
Expand on focus
Password Input
Disabled
Switch
Variants
Disabled
With Label
With Validation-Message
Not allowed to check this :(
Not allowed to check this either :(
RadioGroup
With Validation-Message
No matter what you select, you're always wrong ;)
OTP Input
With Label
With Validation-Message
Invalid Code
With initial values
With placeholder
With summary
Example with onComplete Alert
Combined with Card
Popover
Positions
🍌 You found a fresh Banana in this Popover