@fragment-build/ui NPM

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.

✨ 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

Setup Tailwind CSS
Installation Guide
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:

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.
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.
Breaking Changes: Please use the next-major branch as your base and target branch for your contributions.

👨‍💻 Development

Clone repository

git clone git@github.com: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)