🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@tabnews/ui

Package Overview
Dependencies
Maintainers
2
Versions
27
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tabnews/ui

TabNews UI

latest
Source
npmnpm
Version
0.6.2
Version published
Maintainers
2
Created
Source

@tabnews/ui

A React component library for tabnews.com.br.

Installation

To install the package, use:

npm i @tabnews/ui

Configure Next.js

In your next.config.js, add @primer/react and @tabnews/ui to transpilePackages:

// next.config.js
module.exports = {
  transpilePackages: ['@primer/react', '@tabnews/ui'],
};

Theme Setup

To configure theming, first import the global CSS file in your main application file:

// app/layout.js (App Router) or pages/_app.js (Pages Router)
import '@tabnews/ui/css';

The library provides two properties for theme control:

  • colorMode: Sets a fixed theme, such as "dark" or "light", preventing automatic switching.
  • defaultColorMode: Enables automatic switching based on the user’s preference (light/dark mode).

The usage of these properties depends on which Next.js router you are using:

App Router

In the App Router, wrap your app with PrimerRoot. This component creates the base structure for the <html>, so it also accepts the lang attribute. You can use either defaultColorMode (for automatic switching) or colorMode (for a fixed theme):

// app/layout.js
import { PrimerRoot } from '@tabnews/ui';
import '@tabnews/ui/css';

export default function Layout({ children }) {
  return (
    <PrimerRoot
      lang="en"
      defaultColorMode="dark" // Enables theme switching
      // colorMode="dark" // Uses a fixed theme
    >
      {children}
    </PrimerRoot>
  );
}

Pages Router

In Pages Router, you must add _document.js to ensure proper theme setup:

// pages/_document.js
export { Document as default } from '@tabnews/ui/document';

In _app.js, you can use either AutoThemeProvider or ThemeProvider:

  • If you want to use theme switching, wrap your app with AutoThemeProvider and pass the defaultColorMode property:
// pages/_app.js
import { AutoThemeProvider } from '@tabnews/ui';
import '@tabnews/ui/css';

export default function NextApp({ Component, pageProps }) {
  return (
    <AutoThemeProvider defaultColorMode="dark">
      <Component {...pageProps} />
    </AutoThemeProvider>
  );
}
  • If you want to use a fixed theme, wrap your app with ThemeProvider and pass the colorMode property:
// pages/_app.js
import { ThemeProvider } from '@tabnews/ui';
import '@tabnews/ui/css';

export default function NextApp({ Component, pageProps }) {
  return (
    <ThemeProvider colorMode="dark">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

Note: Although AutoThemeProvider supports setting a fixed theme using colorMode, it is recommended to use ThemeProvider instead when a fixed theme is required. This ensures that the theme is applied immediately.

Configure Vitest

In vitest.config.js, set test.server.deps.inline to true:

// vitest.config.js
test.server.deps.inline: true

Examples

See examples in the examples directory.

Keywords

tabnews
ui

FAQs

Package last updated on 17 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Changelog Podcast: Practical Steps to Stay Safe on npm

Security News

The Changelog Podcast: Practical Steps to Stay Safe on npm

Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.

By Sarah Gooding  -  Oct 31, 2025