Fragment UI (Work in Progress)

Create SaaS UIs with a simple and straightforward design system and component library

---

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
• ✨ Components
• ⏳ Installation
• 🔧 Configuration
  • Next.js 13+
• 🤝 Contributing
• 👨‍💻 Development
• 🤝 Community support
• 📝 License
• 🔧 Built with

✨ 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

// fragment.ts
import { fragmentui } from '@fragment-build/tailwind.plugin';

export default fragmentui();

// hero.ts
import { heroui } from '@fragment-build/tailwind.plugin';

export default heroui();

// src/main.css

@import 'tailwindcss';

@plugin '../hero.ts';
@plugin '../fragment.ts';

/* Note: You may need to change the path to fit your project structure */
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@source '../node_modules/@fragment-build/ui/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

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.

And you need to setup Tailwind 4 using PostCSS

// postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

🤝 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