UI Components
Design tokens, accessible primitives, and core component usage patterns at Nexium Media.
UI Components
Nexium Media UI components are crafted for high accessibility, mobile-first touch targets, and visual consistency across client websites.
Design Principles
- Predictable APIs: Standard prop names like
variant,size,disabled, andasChild. - Brand Theming: Built on CSS variables (
--color-fd-primary: #6f00fffor Nexium Media violet). - Smooth Feedback: Interactive hover transitions, ripple states, and accessible ARIA attributes.
Callout Component
Callouts are used across documentation and client portals to highlight essential information:
<Callout type="info">This is an informational notice.</Callout>
<Callout type="tip">This is a best-practice tip.</Callout>
<Callout type="warn">This is a warning regarding destructive actions.</Callout>Rendered examples:
Client projects must include local business Schema.org JSON-LD structured data for Dhanbad and regional search.
Use keyboard shortcut Cmd + K or Ctrl + K to summon full-text search anywhere on the portal.
Never bypass branch protection rules or push untracked production secrets to git.
Code Blocks
Fumadocs provides syntax highlighting, filename headers, and copy buttons out of the box:
export function trackEvent(name: string, properties?: Record<string, unknown>) {
if (typeof window !== 'undefined' && (window as any).gtag) {
(window as any).gtag('event', name, properties);
}
}Tabs Component
Present multiple options or installation commands cleanly:
npm install @nexium/uiWas this page helpful?
Let us know how we can make our documentation better.
Last updated on