Component Gallery
Explore all 30+ UI components available in N4i GenUI. Each component can be generated from natural language prompts.
4
Layout
6
Content Display
6
Form Inputs
4
Data Display
3
Interactive
5
Navigation & Feedback
Layout
Page
Root container with title and description
Welcome
This is a page description
Page content goes here
Card
Content card with optional title
Card content inside
Row
Horizontal flex container
Grid
CSS grid layout
Content Display
Heading
H1-H6 headings
Heading 1
Heading 2
Heading 3
Text
Paragraph text with variants
Default text style
Muted text
Success text
Bold text
Badge
Status badges with variants
Alert
Alert messages
Progress
Progress bar indicator
Avatar
User avatars with fallback
Form Inputs
Button
Clickable buttons with variants
Input
Text input fields
Select
Dropdown select
Checkbox & Switch
Toggle inputs
I agree to the terms and conditions
Receive email updates
Slider
Range slider input
RadioGroup
Radio button group
Data Display
Table
Data tables
| Name | Status | |
|---|---|---|
| John Doe | john@example.com | Active |
| Jane Smith | jane@example.com | Pending |
| Bob Wilson | bob@example.com | Active |
Chart (Line)
Line chart visualization
Monthly Sales
Chart (Bar)
Bar chart visualization
Product Sales
Chart (Pie)
Pie chart visualization
Market Share
Interactive
Tabs
Tab navigation
Accordion
Collapsible sections
Dialog
Modal dialogs
Navigation & Feedback
Breadcrumb
Navigation breadcrumbs
Stepper
Multi-step progress
Pagination
Page navigation
Skeleton
Loading placeholders
Timeline
Event timeline
Order Placed
9:00 AMYour order was received
Processing
10:30 AMPreparing your order
Shipped
2:00 PMOn the way
Delivered
Expected delivery
Generating Components
You don't need to write JSON manually. Just describe what you want in natural language:
"Create a dashboard with sales stats"
Generated: Page, Card, Heading, Badge, Chart
"Make a user registration form"
Generated: Card, Input, Select, Checkbox, Button
"Show a table of recent orders"
Generated: Card, Table, Badge, Pagination
"Build a pricing comparison"
Generated: Grid, Card, Heading, Text, Badge, Button
Next Steps
- → Try the Widget to generate components
- → Customize with Theming
- → Check the full API Reference