MainTabs Examples
Account settings
const button = (x>=2 && y!=3) const getLoaderOnlyClass = (size) => size === 'small' ? styles['loader-only-button-small'] : styles['loader-only-button-normal']; const test = 10 >= 8 : true : false; <= < > >= == === != !== => ==> && || !! ?? <-- --> *** **** <!-- --> /* comment */ /* ---------- __ */Navbar Examples
Basic Navbar:
Sticky Navbar:
Calendar with Date Info (Object)
March 2026
April 2026
Calendar with Date Info (Function)
March 2026
April 2026
Skeleton Examples
Button Examples - All Combinations
Solid Variant
Normal Size:
Small Size:
Outline Variant
Normal Size:
Small Size:
Ghost Variant
Normal Size:
Small Size:
Text Variant
Normal Size:
Small Size:
Spinner Examples
Button Loading States Examples
Solid Variant (Inverted Spinner)
Outline Variant (Matching Color Spinner)
Ghost Variant (Matching Color Spinner for colored)
Text Variant (Matching Color Spinner for colored)
Size Variants
Loading With/Without Text
Disabled Loading State
Select Examples
KYC required for image ordersPlease contact your organization owner to complete the KYC process for the image orders. You can also contact support@raystack.io for assistance.
Normal size:
Small size:
Dialog Examples
Form Component Examples
Disabled Select:
Test Normal size:
$10,000,100,091,636,935Amount Examples
Basic Amount (Minor Units):
USD: $9,999,900.00INR: ₹1,299.00EUR: €1,500.00
Major Units (valueInMinorUnits=false):
USD:$9,999.90JPY:¥9,999BHD:BHD 99.999
Currency Display Formats:
Symbol:€1,299.00Code:EUR 1,299.00Name:1,299.00 euros
Different Locales:
US: €1,299.00DE: 1.299,00 €JP: €1,299.00
Decimal Control:
No Decimals:$1,299Min 2:$1,299.00Max 1:$1,299.0
Grouping Control:
With Grouping: $99,999.99No Grouping:$99999.99
Error Handling (Invalid Currency):
Fallback to USD: $1,299.00
Avatar Examples
JD
AS
RK
PL
+1
DataTable - Zero State and Empty State Examples
Zero State - No Data, No Filters/SearchFilter bar is hidden, search is disabled. Shows zeroState when no data is fetched initially.
Zero stateGet started by creating your first user. Filter bar and search are hidden in zero state.
Empty State - Filters Applied, No ResultsFilter bar is visible, search is enabled. Shows emptyState when filters are applied but no results match.
NameEmailRole
Bob Johnsonbob@example.comUser
Jane Smithjane@example.comUser
John Doejohn@example.comAdmin
Empty State - Search Applied, No Results (Filter Bar Hidden)Filter bar stays hidden when only search is applied (no filters). Search is enabled. Shows emptyState.
NameEmailRole
Bob Johnsonbob@example.comUser
Jane Smithjane@example.comUser
John Doejohn@example.comAdmin
Zero State with Custom ContentCustom zeroState with action button. Filter bar and search are hidden.
No data availableThere are no users in the system. Create your first user to get started.
Search Override - Always Enabled in Zero StateOverride auto-disable with autoDisableInZeroState=. Filter bar stays hidden when only search is applied.
zero stateSearch is enabled even in zero state. Start typing to see empty state. Filter bar will only appear when filters are applied.
Normal State - Data PresentFilter bar and search are enabled when data exists.
NameEmailRole
Bob Johnsonbob@example.comUser
Jane Smithjane@example.comUser
John Doejohn@example.comAdmin
ScrollArea Examples
Basic Vertical ScrollArea:
Basic Horizontal ScrollArea:
Both Vertical and Horizontal Scrollbars (Corner auto-added):
Auto Scroll (default):