@f97/twilight-ui

Twilight UI

A super opinionated UI library for React & Tailwind CSS

Foreword

This project is work in progress.

Storybook

https://ui.twilight-toolkit.ouorz.com →

Default usage (Standalone)

1. Import the Twilight UI stylesheet (with Tailwind CSS included in the bundle) globally:

   import "./node_module/@twilight-toolkit/ui/dist/index.css"
   

2. Import components from @twilight-toolkit/ui:

   import { Button } from "@twilight-toolkit/ui"
   

Headless usage

In a Tailwind CSS project, Twilight UI should be used headlessly (to avoid styling conflicts).

1. Import the Twilight UI stylesheet (without Tailwind CSS included in the bundle) globally:

   import "./node_module/@twilight-toolkit/ui/dist/index-headless.css"
   

2. Configure tailwind.config.js for Tailwind CSS to compile Twilight UI's styling:

   module.exports = {
     content: [
      // ...
      "./node_module/@twilight-toolkit/ui/dist/index-headless.js",
     ],
   }

3. Import components from @twilight-toolkit/ui:

   import { Button } from "@twilight-toolkit/ui"