Nextail

Nextail focuses on being Easy to USE, Easy to CONFIGURE and Easy to CUSTOMISE. Providing React Components that are styled with TailwindCSS. Usage and examples focus on using Nextail with Next.JS.

Packages

Nextail Core

Nextail Core provides a collection of ready to use React Components.

Installation

Nextail Core is available as an npm package.

// with pnpm
pnpm install @nextail/core

// with npm
npm install @nextail/core

// with yarn
yarn add @nextail/core

Nextail Providers

Nextail Provides is a collection of react hooks with context providers. More to come.

Installation

Nextail Providers is available as an npm package.

// with pnpm
pnpm install @nextail/providers

// with npm
npm install @nextail/providers

// with yarn
yarn add @nextail/providers

Nextail Hooks

Nextail Hooks is a collection of React Hooks. More Coming

Installation

Nextail Hooks is available as an npm package.

// with pnpm
pnpm install @nextail/hooks

// with npm
npm install @nextail/hooks

// with yarn
yarn add @nextail/hooks

Usage

Use Location

Use Location allows access vanilla JS window.location from within you application.

Here is the app.tsx file of a Next.js project.

Example of use in a Next.Js page.

import type { NextPage } from 'next';
import React from 'react';

import Button from '@nextail/core/Button';
import UseLocation from '@nextail/hooks/useLocation';

const Home: NextPage = () => {
  const { pathname } = UseLocation();

  return (
    <div className='w-full h-screen bg-white dark:bg-slate-300'>
      <h1 className='text-4xl text-black dark:text-slate-200'>{pathname}</h1>
    </div>
    );
};

export default Home;

If index page page would display '/'.

Websites

Landing Page

Nextail Landing Page

Source Code

Documentation

Nextail Documentaion

Source Code

Usage

Here is an example of a Next.JS page with button.

import type { NextPage } from 'next';
import React from 'react';

import Button from '@nextail/core/Button';

const Home: NextPage = () => {
  return <Button link='https://nextail-ui.vercel.app'>Nextail</Button>
};

export default Home;
  return (

Examples

Coming Soon

Contributing

Guide Coming Soon

License

This project is licensed under the terms of the MIT license.