@snipshot/particles NPM

Particles UI

Note: Particles UI is currently in an experimental alpha version, and there may be critical changes in future releases. We appreciate contributions and invite developers to join us in developing and improving this library.

Particles UI is a modern and customizable React components library for building beautiful web applications.

Features

Easy-to-use UI components.
Customizable styles and theming.
Accessibility-friendly components.
Built with performance and scalability in mind.
Comprehensive documentation and examples.

Particles UI's styling is built using Sass modules. For customization, we recommend using CSS modules to maintain separation and prevent any unintended styling conflicts.

Installation

npm install @snipshot/particles

After installation, follow these steps to start using Particles UI components:

Import the styles inside you application entry point. Depending on your framework, this could be main.js file for Vite, index.js for CRA, _app.js for Next.js page router, or root layout.js for Next.js app router.

import '@snipshot/particles/style.css';

Set the data-pui-mode attribute on the <html> element. It will be the default color mode for your application, and it can have one of the following values: system, light, or dark.

<!DOCTYPE html>
<html lang="en" data-pui-mode="system">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Application powered by Particles UI</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

Import the <PuiTheme /> component that contains default theme and allows you to customise it with mainColors and theme props. Depending on your framework, you can place it inside the <head> element or at the top of the <body> element. It could be App.js file for Vite and CRA, _document.js for Next.js page router, or root layout.js for Next.js app router.
Below is the example of _document.js file of Next.js pages router:

import { Html, Head, Main, NextScript } from 'next/document';

import { PuiTheme } from '@snipshot/particles';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <PuiTheme />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Wrap the contents of your application with the <ThemeProvider> component, which preserves the color mode state and provides useful hooks.
Here is the example of the root layout.js of Next.js app router:

import { ThemeProvider } from '@snipshot/particles';

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-pui-mode="system">
      <body>
        <PuiTheme />
        <ThemeProvider>
          <main>{children}</main>
        </ThemeProvider>
      </body>
    </html>
  );
}

After completing these steps, you can start using the components within your application:

import { Button } from '@snipshot/particles';

function App() {
  return (
    <div>
      <Button color="secondary">Post</Button>
    </div>
  );
}

We hope you will use them with joy 😉

Documentation

Documentation website is currently under development. It will be released soon on particles.snipshot.dev.

Acknowledgments

React - The library for web and native user interfaces.
Vite - Frontend Tooling.
Next.js - The React Framework for the Web.
Nextra - Static site generation framework.
Storybook - Frontend workshop for UI development
SASS - CSS extension language.
Material Design - Google's open-source design system.
Fluent 2 - Microsoft's design system.
Open UI - The Open UI Community Group.

Contributions

Contributions are always welcome! If you have ideas for improvements or new features, please open an issue or submit a pull request on GitHub.

Contacts

If you have any questions or need assistance, feel free to contact us at particles@snipshot.dev.

License

Particles UI is licensed under the MIT License. See the LICENSE file for details.

Made with ♥️ by Linkerin.

particles ui react component

@everything-registry/sub-chunk-848

0.0.2

7 months ago

0.0.1

7 months ago