https://github.com/te6-in/te6-ui

A collection of UI components for Next.js, built with Tailwind CSS.
https://github.com/te6-in/te6-ui

components nextjs react tailwindcss ui

Last synced: 4 months ago
JSON representation

A collection of UI components for Next.js, built with Tailwind CSS.

• Host: GitHub
• URL: https://github.com/te6-in/te6-ui
• Owner: te6-in
• License: mpl-2.0
• Created: 2024-01-30T16:27:42.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-24T06:25:46.000Z (5 months ago)
• Last Synced: 2024-10-22T21:53:22.261Z (4 months ago)
• Topics: components, nextjs, react, tailwindcss, ui
• Language: TypeScript
• Homepage: https://ui.te6.in
• Size: 712 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
@te6/ui


**
A collection of UI components for Next.js, built with Tailwind CSS.
**


⚠️ This project is still in early development and might break a lot.


## What's included

- Tailwind CSS Preset

  - `te6TailwindPreset`

- Layout

- Components

  - `BottomToolbar`

  - `Button`

  - `Checkbox`

  - `FloatingButton`

  - `FullScreenOverlay`

  - `Selector`

  - `Skeleton`

  - `TextArea`

  - `TextInput`

  - `Toggle`

- Utilities

  - `j` for joining classes

## Yet to come

- SSR (all pages under `/app` should be marked as `"use client"` as of now)

## Features

- General accessibility

- Color customization

- Some animations and micro-interactions

- Support for `prefers-color-scheme` (or Tailwind's class-based dark mode)

- Support for `prefers-reduced-motion`

- Support for `prefers-reduced-transparency`

- Support for `env(safe-area-inset-*)`

## Assumptions

- You use `Next.js`, `Tailwind CSS`, `react-hook-form`, `Lucide`, `framer-motion`.

## Installation

```shell

pnpm add @te6/ui && pnpm add -D tailwind-mq

```

## Config

```ts

// tailwind.config.ts

import type { Config } from "tailwindcss";

import defaultColors from "tailwindcss/colors";

import defaultTheme from "tailwindcss/defaultTheme";

import { te6TailwindPreset } from "@te6/ui";

const config: Config = {

  // mandatory: add `@te6/ui` to content

  content: ["./app/**/*.tsx", "./node_modules/@te6/ui/dist/index.js"],

  // mandatory: import and add the preset

  presets: [te6TailwindPreset],

  theme: {

    extend: {

      // mandatory: extend the theme to customize all colors

      // tip: use some kind of sites like https://uicolors.app/

      colors: {

        body: {

          DEFAULT: "#F7F7F7", // use lighter color than `base-50`

          dark: "#1F1F1F", // use darker color than `base-dark-950`

        },

        base: {

          50: "#FDFDFD",

          // ... make sure all 50-950 of base are defined

          950: "#2F2F2F",

        },

        "base-dark": {

          50: "#FDFDFD",

          // ... make sure all 50-950 of base-dark are defined

          // it doesn't matter if it's the same as `base`

          950: "#2F2F2F",

        },

        primary: defaultColors.blue, // or you can do something like this

        accent: {

          50: "#FFFDF5",

          // ... make sure all 50-950 of accent are defined

          950: "#332B07",

        },

      },

      // optional: set the font family as you want

      // if you decide to do this, make sure you import the font on `globals.css`

      fontFamily: {

        sans: [

          "Wanted\\ Sans\\ Variable",

          "Wanted\\ Sans",

          ...defaultTheme.fontFamily.sans,

        ],

      },

    },

  },

};

export default config;

```

## Shoutouts

- [`lukewarlow/tailwind-mq`](https://github.com/lukewarlow/tailwind-mq)