Loading FundSpace...
Welcome back! Here's what's happening with your fund.
Total Funds
$125,430
+12% from last month
Active Projects
24
8 pending approval
Investors
156
+5 new this week
Success Rate
94%
Above target
Click-activated overlays for richer announcements and contextual walkthroughs without hijacking the workflow.
Responsive overlays that stay open across trigger and content to support richer guidance.
New investment received
Amount: $25,000
Project approved
Project: EcoTech Solutions
Investor registered
Investor: Sarah Johnson
Fund disbursed
Amount: $15,000
Quick Actions
Trigger each stateful toast with custom React node content to validate the experience.
Inter (Google Font) typography system with all variants from the style guide.
38 Display
Font: 38px | Line Height: 48px | Letter Spacing: -0.5px | Weight: Bold
26 Heading
Font: 26px | Line Height: 32px | Letter Spacing: -0.5px | Weight: Bold
22 Heading
Font: 22px | Line Height: 32px | Letter Spacing: -0.5px | Weight: Bold
18 Heading
Font: 18px | Line Height: 26px | Letter Spacing: -0.25px | Weight: Bold
16 Body Regular
Text Block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dignissim quam. Proin vel ultrices risus, ac tempor arcu. Donec sed consectetur tellus, ut placerat nisl.
Font: 16px | Line Height: 24px | Letter Spacing: 0 | Weight: Regular
16 Body Medium
Text Block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dignissim quam. Proin vel ultrices risus, ac tempor arcu. Donec sed consectetur tellus, ut placerat nisl.
Font: 16px | Line Height: 24px | Letter Spacing: 0 | Weight: Medium
14 Body Regular
Text Block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dignissim quam. Proin vel ultrices risus, ac tempor arcu. Donec sed consectetur tellus, ut placerat nisl.
Font: 14px | Line Height: 20px | Letter Spacing: 0 | Weight: Regular
14 Body Medium
Text Block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dignissim quam. Proin vel ultrices risus, ac tempor arcu. Donec sed consectetur tellus, ut placerat nisl.
Font: 14px | Line Height: 20px | Letter Spacing: 0 | Weight: Medium
12 Description Regular
Text Block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dignissim quam. Proin vel ultrices risus, ac tempor arcu.Font: 12px | Line Height: 18px | Letter Spacing: 0 | Weight: Regular
12 Description Medium
Text Block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dignissim quam. Proin vel ultrices risus, ac tempor arcu.Font: 12px | Line Height: 18px | Letter Spacing: 0 | Weight: Medium
12 Description Semi Bold
Text Block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dignissim quam. Proin vel ultrices risus, ac tempor arcu.Font: 12px | Line Height: 18px | Letter Spacing: 0 | Weight: Semi Bold
10 Labels Semi Bold Caps
Font: 10px | Line Height: 12px | Letter Spacing: 0 | Weight: Semi Bold
10 Labels Semi Bold Caps (Uppercase)
Font: 10px | Line Height: 14px | Letter Spacing: 0.2px | Weight: Semi Bold | Transform: Uppercase
Legacy Variants (h1-h6, body)
H1
Font: 38px | Line Height: 48px | Letter Spacing: -0.5px | Weight: Bold
H2
Font: 26px | Line Height: 32px | Letter Spacing: -0.5px | Weight: Bold
H3
Font: 22px | Line Height: 32px | Letter Spacing: -0.5px | Weight: Bold
H4
Font: 18px | Line Height: 26px | Letter Spacing: -0.25px | Weight: Bold
Body
Body text for paragraphs and general content. This is the default body text style.
Font: 16px | Line Height: 24px | Letter Spacing: 0 | Weight: Regular
Colors & Customization
Color Variants
Default color text
Primary color text
Secondary color text
Success color text
Error color text
Muted color text
Alignment
Left aligned text
Center aligned text
Right aligned text
Text Truncation
This is a very long text that will be truncated with ellipsis when it exceeds the container width
This is a multi-line text that will be clamped to 2 lines. The rest of the content will be hidden with an ellipsis at the end.
Default
Pill
Switch
Sizes
Controlled
Basic Radio Group
Vertical Layout
Different Sizes
Error State (Controlled)
Disabled Group (Controlled)
Enterprise-grade Card component with multiple variants, sizes, and flexible composition options.
By continuing, I agree to the User Terms and Privacy Policy
This is a basic card with default variant. It includes a title and body content.
This card has a header section
This is the body content of the card. You can put any content here.
This card uses the elevated variant with shadow effects and no border.
Flat variant with minimal styling and gray background.
This card is clickable. Click anywhere on the card to trigger an action.
Small size card with compact padding.
Large size card with more spacious padding and larger border radius.
Active projects: 24
Foundational Variants
States & Guidance
DatePicker Examples
DateTimePicker Examples
DateRangePicker Examples
DateTimeRangePicker Examples
Basic Input
Variants
Sizes
With Labels
With Icons
Search Input
Password Input
Phone Number Input
Clearable Input
Error & Success States
With Helper Text
Full Width
Disabled & Read Only
Enterprise-grade table component with row selection, expansion, sorting, and pagination. Supports both synchronous and asynchronous data operations.
Name | Activity | Last Active | Location | Primary Email | Tags | Actions | ||
|---|---|---|---|---|---|---|---|---|
I Ian Dooley | Active | Today | San Francisco, CA | someone@grovio.xyz | BadgeBadgeBadge | |||
S Sarah Johnson | Active | Yesterday | New York, NY | sarah@example.com | BadgeBadge | |||
M Michael Chen | Inactive | 5th May | Los Angeles, CA | michael@example.com | Badge | |||
E Emily Davis | Active | Today | Chicago, IL | emily@example.com | BadgeBadgeBadge+1 | |||
D David Wilson | Active | Yesterday | Seattle, WA | david@example.com | BadgeBadge |
Name | Activity | Last Active | Location | Primary Email | Tags |
|---|---|---|---|---|---|
No data available | |||||
Default Variant (Tab Bar)
Default Variant with Background
Basic Uploader
File Type Configuration
File Size Configuration
Maximum Files Configuration
Purchase UI kits to boost your design process. Get Material-X
All devices are connected and working properly.
Please review the following items that require your attention.
Your payment method has expired. Please update your card information to continue.
This accordion is controlled by external state. Current state: Collapsed
16 March, 2020
12 March, 2020
10 March, 2020
This comprehensive design system includes all the components, tokens, and templates you need to build beautiful, consistent user interfaces.