Simple NextJS + Tailwind Components to get you started!
Nobody wants to start from scratch every time. Nekta is a collection of simple NextJS + Tailwind components to get you started. They are easy to use, cover basic use cases and when time comes, you can replace them with your own components without any hassle.
Nekta
Disclaimer
Nekta is not a complete UX solution and it never will be. It is a simple component library designed to give you what you need to get started. When your needs grow, you can and should replace Nekta components with your own components.
Get Started
Visit the Nekta GitHub Repo or NPM page to get started.
Layouts
Nekta provides a few components to help your with the core layout of your site. The includes a 'ContentLayout' to be used in your 'layout.tsx' file as well as Nav and Footer Components. You can use these all together or just pick the ones you need.
Content Layout
This component provides an excellent layout for your website. It includes a top navigation bar, central content area, and a bottom footer. If the content does not fill the entire height of the window, it will expand to ensure the footer remains at the bottom. Integrate this component in your layout.tsx file. It accepts nav and footer as props. (If you want to use the Nekta provided components see the examples of them below.)
<ContentLayout nav={<p>nav</p>} footer={<p>footer</p>}>
Content
</ContentLayout>Nav
This navigation bar component positions the logo on the left and the links on the right, with a maximum content width of 1300px. The links are provided as an array of objects, each containing text and an href. The logo can be either a string or a component.
Footer
This footer component includes an optional Nekta Badge (Disabled by default), space for a copyright notice and links, with a maximum content width of 1300px. On desktop, the layout is two (or three if Nekta badge is enabled) columns, while on mobile, it switches to one column. The links are provided as an array of objects, each containing text and an href.
Base Section
The Base Section component serves as a simple container for content with a maximum width of 1300px. Both the HeroSection and LandingSection components are built upon this base component.
Landing Page
These components are designed to help you get a great start on your landing page. Your landing page serves as your first impression to users. Make it impactful.
Hero Section
Derived from the BaseSection component, this component establishes a two-column layout for your hero section with a maximum content width of 1300px. It automatically adjusts to a single-column layout on mobile devices.
column 1
column 2
Landing Section
Based on the BaseSection component, this component offers a centered single-column layout featuring a title and description with a maximum width of 800px, and a content section with a maximum width of 1300px.
Landing Section Title
This is a description in the landing section component. It has a maximum width of 800px.
content
Server Action Forms
The Form and UnstyledForm components provide basic forms with simple error handling. They are designed to work with server actions. Each example below also shows the form input components available.
Form
A styled form component with a title, description, and form input components.
Form Title
Form Description
Unstyled Form
An unstyled form component with form input components.
Other Components
A collection of other components that can be used in your site.
Rating
A simple out of 5 rating component
Nekta Icon
The Nekta Icon as an SVG component.