abElements is a lightweight library of 100% free UI elements for all your Next.js, React, Vue, Lit and Flutter projects.

Checkout abElements →

IMPORTANT: This is a work in progress and subject to major changes until version 1.0

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

This project uses the ab-nextjs-components package, and can be installed by running the following command:

npm i ab-nextjs-components
# or
pnpm install ab-nextjs-component

These are a couple of the main requirements for this project:

1. A splash screen - always 😜
2. A home page - duh ;)
3. A docs page.
4. A search page.
5. A demo page.
6. TBD

MOTTO: I'll always do more 😜

Jobs related to this ab-elements-app project - a list of some specific files to be submitted as well as their corresponding / current status for this project:

WARNING: This list is a work in progress and will change soon

NOTE: (*) = still needs to be updated (TBD) = to be determined ;)

IMPORTANT: ab-elements-app uses the App Router feature of Next.js.

The folder & file structure of this Next.js project, based on it's Project Structure:

src
├── app
│   ├── [locale]
│   │   ├── @splash
│   │   ├── @welcome
│   │   ├── (pages)
│   │   │   ├── docs
│   │   │   │   ├── aside.tsx
│   │   │   │   ├── main.tsx
│   │   │   │   ├── page.tsx
│   │   │   │   └── styles.module.css
│   │   │   ├── demo
│   │   │   ├── search
│   │   │   ├── ... 
│   │   │   ├── page.tsx
│   │   ├── components # <- DEPRECATED: using `ab-nextjs-components` instead ;)
│   │   │   ├── ab-button
│   │   │   ├── ab-collapsible
│   │   │   ├── ab-icon-button
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.module.css
│   │   │   ├── ...
│   │   │   └── server
│   │   │       ├── ab-avatar
│   │   │       ├── ab-logo
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.module.css
│   │   │       └── ... 
│   │   ├── core # <- DEPRECATED: using `ab-nextjs-core` instead ;)
│   │   │   └── server
│   │   │       ├── ab-app-layout
│   │   │       ├── ab-aside-layout
│   │   │       └── ab-main-layout
│   │   ├── globals.css
│   │   ├── hooks # <- DEPRECATED: using `ab-nextjs-hooks` instead ;)
│   │   │   ├── index.ts
│   │   │   └── useElement.ts
│   │   ├── layout.tsx
│   │   ├── metadata.ts
│   │   ├── sections
│   │   ├── skeletons
│   │   └── views
│   └── favicon.ico
├── i18n.ts
├── messages
│   ├── en.json
│   ├── es.json
│   ├── fr.json
│   └── ru.json
└── middleware.ts

• public
• • • manifest.json
• • • ...
• • assets
• • • logos
• • • images
• • • animations
• • • • fade-in-animation.css
• • • • pop-in-animation.css
• • • • slide-from-down-animation.css
• • • theme
• • • • color.css
• • • • typography.css
• • • • styles.css

• LICENSE
• README.md
• package.json
• ab_translator.mjs

NOTE: This is just a relatively short snippet derived from the root folder, and it should get periodically update.

These are some of the things we did or plan to do, in addition to this project's requirements:

NOTE: (*) = still needs to be updated.
There's certainly a couple of file we must've forgot or not added yet, so we'll keep the above list updated obv. :)

IMPORTANT: All the tests are performed end-to-end reliably using playwright

NOTE: IE = Internet Explorer = 👎🏽

IMPORTANT: You must install translate-shell first.

A script that currently automates the translation of ab-elements-app into 4 different languages (i.e. english, french, russian and spanish)

GOOD-TO-KNOW: next-intl is currently used for internationalization of ab-elements-app.

To translate the ab-elements-app strings messages to another language (say, french fr), use the ab_translator.mjs node script by running the code below in your terminal:

node ab_translator.mjs messages fr

NOTE: The source file (e.g. fr.json) should be updated afterwards to fix typos and/or adapt the texts accordingly.

• Create the project-specific logos
• Add localization / internationalization (at least: en, fr, ru and es)

• 🌱 Create a ab-nextjs-core npm package
• 💫 Create a ab-nextjs-animations npm package
• 🎨 Create a ab-nextjs-theme npm package
• 📦 Create a ab-nextjs-components npm package
• ✏️ Create a ab-nextjs-fonts npm package
• ⭐️ Create a ab-nextjs-icons npm package
• 🪝 Create a ab-nextjs-hooks npm package

• 🌱 Create a ab-react-core npm package
• 💫 Create a ab-react-animations npm package
• 🎨 Create a ab-react-theme npm package
• 📦 Create a ab-react-components npm package
• ✏️ Create a ab-react-fonts npm package
• ⭐️ Create a ab-react-icons npm package
• 🪝 Create a ab-react-hooks npm package

• 🌱 Create a ab-vue-core npm package
• 💫 Create a ab-vue-animations npm package
• 🎨 Create a ab-vue-theme npm package
• 📦 Create a ab-vue-components npm package
• ✏️ Create a ab-vue-fonts npm package
• ⭐️ Create a ab-vue-icons npm package
• 🪝 Create a ab-vue-hooks npm package

• 🌱 Create a ab-lit-core npm package
• 💫 Create a ab-lit-animations npm package
• 🎨 Create a ab-lit-theme npm package
• 📦 Create a ab-lit-components npm package
• ✏️ Create a ab-lit-fonts npm package
• ⭐️ Create a ab-lit-icons npm package
• 🪝 Create a ab-lit-hooks npm package

• 🌱 Create a ab-flutter-core npm package
• 💫 Create a ab-flutter-animations npm package
• 🎨 Create a ab-flutter-theme npm package
• 📦 Create a ab-flutter-components npm package
• ✏️ Create a ab-flutter-fonts npm package
• ⭐️ Create a ab-flutter-icons npm package
• 🪝 Create a ab-flutter-hooks npm package

The design & development of this project was inspired by the following:

NOTE: The above catalyst UI kit is currently €129 (plus local taxes), but abElements is 100% free and always will be ;)

To learn more about abElements, take a look at the following resources:

• abElements Documentation - learn about abElements features and API.

You can check out the abElements GitHub repository for more details.

This ab-elements-app project is MIT Licensed ;)