npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fragment-build/ui

v1.13.6

Published

<div align="center"> <img style="height: 100px; margin-bottom: 10px;" src="public/assets/logo.svg" alt="Logo - Fragment UI" /> </div> <div align="center"> <h1>Fragment UI (Work in Progress)</h1> <p>Create SaaS UIs with a simple and straightforward d

Downloads

588

Readme


Fragment UI is a design system and React component library which provides already compositioned views for many SaaS apps which are completely customizable with our powerful theme system.

Table of Contents

✨ Features

  • Global theme file with design tokens for colors, padding, margin, border-radius
  • Global event system: Hook into every click event to trigger analytics/tracking events. All events are already pre-labeled but can be customized.
  • Accessibility: All components are already prepared using aria labels and you can also easily use tab to navigate through them
  • Light / Dark mode compatible: By design we're supporting ☀️ Light / 🌙 Dark modes
  • Interactive Theme Builder (soon): A user interface to create your custom theme file with a real-time preview
  • Native i18n support (soon): All components are localized by default but o course you can override this behavior

✨ Components

  • Roles- & Permission Management
  • User Management
  • Team/Organization management with Invites
  • Payment/Subscription Management
  • Auth pages: Login, Signup, Password reset, Email confirmation
  • Dashboard View with Sidebar and Topbar
  • User Settings

⏳ Installation

  1. Setup Tailwind CSS
    Installation Guide

  2. Install Fragment UI

npm install -S @fragment-build/ui

As a next step you must configure the library the way you want to. See Configuration section.

All done. Enjoy 🎉

🔧 Configuration

// tailwind.config.ts

import type { Config } from 'tailwindcss';
import { fragmentui, nextui } from '@fragment-build/ui';

const config: Config = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
    './node_modules/@fragment-build/ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  plugins: [
    fragmentui(),
    nextui(),
  ],
};

export default config;

It is essential to add the FragmentUIProvider at the root of your application.

import React from "react";

// 1. import `FragmentUIProvider` component
import { FragmentUIProvider } from "@fragment-build/ui";

function App() {
  // 2. Wrap FragmentUIProvider at the root of your app
  return (
    <FragmentUIProvider>
      <YourApplication />
    </FragmentUIProvider>
  );
}

Next.js 13+

When using Next.js you will need to add a file to re-export Fragment UI using 'use client'; to tell Next.js to render them as client components.

'use client';

export * from '@fragment-build/ui';

Now just import all the components you need from this file.

🤝 Contributing

Feel free to fork and make a Pull Request to this project. All the input is warmly welcome!

To increase the amount of PRs being merged asap, we have some guidelines:

  1. Bugfixes: If it's just a small fix you can just create a PR for it and explain your thoughts if necessary, otherwise use GitHub or Discord to start a discussion before you put a lot of effort into code changes.
  2. Features: If you want to add new features, please use GitHub or Discord to start a discussion and we can figure out design and architectural decisions together.
  3. Breaking Changes: Please use the next-major branch as your base and target branch for your contributions.

👨‍💻 Development

  • Clone repository

    git clone [email protected]:fragment-build/fragment-ui.git
    cd fragment-ui
    npm install
  • Run storybook

    npm run storybook

🤝 Community support

For additional help, you can use one of these channels to ask a question:

  • Discord We're present on official Fragment UI Discord. Feel free to use our channels or reach out to us directly.
  • GitHub (Bug reports, Contributions, Questions and Discussions)

📝 License

Apollo 2.0 License Copyright (c) solyd GmbH

🔧 Built with

React NextUI TailwindCSS TailwindVariants