React Templates & Themes Logo React Templates & Themes
Twitter UI Practise screenshot

Twitter UI Practise

Author Avatar Theme by Royquilor
Updated: 24 Jan 2023
262 Stars

Twitter UI is a beast to style. Practise with Next JS, Tailwind CSS, Radix UI and Storybook.

Github Live Preview

Categories

Nextjs Tailwind Radix ui

Overview

The project is a Twitter UI clone created using Next.js, Tailwind CSS, Radix, and Storybook. Developed by a web designer with experience in HTML, Tailwind CSS, and basic JavaScript, the goal was to learn Next.js while recreating the Twitter homepage UI. The project acknowledges its flaws and welcomes suggestions for improvements.

Features

  • Next.js: Used for building fast and scalable applications.
  • Tailwind CSS: Utilized for rapid styling with utility classes.
  • Radix: Integrated for creating variants for components.
  • Storybook: Facilitates the viewing of components in isolation.
  • Vercel: Hosting platform used for deploying the project.
  • class-variance-authority: Enables creation of variants for elements, similar to Figma’s component variants.
  • classnames: Allows grouping of CSS utility classes for styling components.
  • Text Component: Testing a Text component via a YouTube video.

Installation

To get started:

  1. Git clone the repository.
  2. Checkout Storybook to view components in isolation.
  3. Explore the project and suggest improvements for the Twitter UI clone.

Summary

The Twitter UI clone project showcases the use of Next.js, Tailwind CSS, Radix, Storybook, and Vercel. The web designer behind the project aims to enhance their skills, inviting feedback for improvements. The project serves as a learning experience and an opportunity to delve deeper into Next.js development while having fun and exploring new concepts.