Live specimens with source code. Click the code icon to view implementation.
Primary, secondary, ghost, danger variants with sizes and loading state.
Default, interactive (hover effects), and featured (accent border + glow).
Default
Static card.
Interactive
Hover me.
Featured
Accent glow.
Color-coded labels for status and categories.
Text inputs with labels, placeholders, and error states.
Invalid email address
Multi-line text input with label and error support.
Maximum 200 characters
Dropdown select with custom chevron icon.
Checkboxes with labels and disabled state.
On/off switch for boolean settings.
Dialog overlay with backdrop blur.
Contextual messages for info, success, warning, and error.
Note
This is an informational message.
Operation completed successfully.
Please review before proceeding.
Error
Something went wrong.
Data table with hover rows and typed columns.
| Name | Role | Status | Joined |
|---|---|---|---|
| Alice Chen | Engineer | Active | 2024-01 |
| Bob Park | Designer | Away | 2024-03 |
| Carol Wu | PM | Active | 2024-06 |
Tabbed content navigation.
Overview content goes here.
Hover-triggered contextual text.
Navigation path with linked segments.
Click-triggered menu with close-on-outside-click.
Page navigation with active state.
Loading placeholders with pulse animation.
Notification banners for transient messages.
Changes saved successfully.
Failed to save changes.
Your session will expire soon.
New update available.
Placeholder for empty data views.
Try adjusting your search or filters to find what you're looking for.
User avatars with initials fallback.
Horizontal rule with optional centered label.
Content above
Content below
More content
Final content
Track + fill bar for usage meters, uploads, and quotas.
Key-value pair display for detail pages and summaries.
Horizontal (default)
Stacked
Mutually exclusive option selection for forms and settings.
Searchable select dropdown for long option lists.
Slide-in panel for detail views and supplementary content.
Multi-step progress indicator for wizards and checkout flows.
Horizontal
Account
Profile
Review
Complete
Vertical
Create account
Enter your email and password
Set up workspace
Configure your team settings
Invite members
Add your team
Cmd+K searchable command overlay for quick navigation.
Dismissible top banner for announcements and notices.
New feature available! Check out our latest update.
Your account has been verified successfully.
Your trial expires in 3 days. Upgrade now.
Payment failed. Please update your billing info.
Welcome to NyxWorks! Get started with the docs.
Segmented control for toggling between views or filters.
Default
Small
Standalone metric display for dashboards and overview screens.
Revenue
$48.2K
+12%Users
2,847
+5.3%Bounce Rate
24.3%
+2.1%Sessions
12.4K
List items with optional avatar, text, and trailing action.
Alice Chen
Engineering · Online
Vertical sidebar navigation with sections, icons, and active state.
Page-level heading bar with breadcrumb, description, and actions.
Manage and organize your team's projects.
Activity feed / timeline for chronological events.
2 hours ago
4 hours ago
1 day ago
2 days ago
Horizontal media + text layout for comments, notifications, and list items.
Alice Chen
New notification
DNS propagated
Card header strip with title, badge, and trailing actions.
Last 7 days
Standalone section heading with tabs, actions, and badge.
Manage your account preferences.
Card-wrapped list with header and optional footer.
Alice Chen
Engineering
Bob Park
Design
Carol Wu
Product
Responsive grid of selectable/clickable cards with image, title, and badge.
Enhanced input with leading/trailing addons — icons, text, buttons.
Invalid email address
Two-column form section with title + description left, fields right.
Your public profile information.
How you receive alerts.
Form action bar for save/cancel, confirmations, and toggles.
Month-view calendar with date selection and event dots.
Reusable top navigation bar with brand, links, actions, and mobile menu.
Hero sections, features, pricing, testimonials, and more.
Marketing hero with eyebrow, gradient title, subtitle, and CTA actions.
The modern design system for beautiful, consistent applications.
Feature showcase with icon cards in grid, bento, or alternating layouts.
Build production-ready apps with these primitives.
Optimized for performance with zero runtime overhead.
Built-in security best practices out of the box.
Track everything with built-in analytics hooks.
Mix and match primitives to build any interface.
Go from prototype to production in hours, not weeks.
Delivered from edge locations worldwide.
Call-to-action in centered, banner, card, or split layouts.
Start building for free today.
Unlock all components and templates.
Single pricing card — compose in a grid for pricing sections.
For individuals
For teams
Custom solutions
Customer quote card in default, featured, and minimal variants.
NyxWorks saved us months of design work. The components are polished and production-ready.
Sarah Chen
CTO at TechCo
The best design system we've used. Dark mode support is flawless.
Alex Rivera
Lead Designer
Row of partner/client logos with hover opacity and grayscale effects.
Trusted by leading companies
Email capture section in centered, inline, or card variants.
Get the latest updates delivered to your inbox.
Collapsible Q&A list with single or multi-open mode.
Team member card with avatar, bio, and social links.
Article preview card in vertical, horizontal, or featured layouts.
Rich dropdown with icon + description items.
Product cards, cart, checkout, ratings, and more.
Product display card with image, price, rating, and action.
Star rating display (readonly) and interactive input.
Readonly
Interactive
Formatted price with optional original price and sale badge.
Shopping cart line item with quantity controls.
Classic T-Shirt
Black / Medium
Running Shoes
White / Size 10
Checkout summary card with line items and CTA.
Faceted filter sidebar with collapsible groups.
Incentive/benefit strip for shipping, returns, warranty.
Free Shipping
On orders over $50
Easy Returns
30-day return policy
Secure Checkout
SSL encrypted
