repository·main·Indexed 26 days ago
https://github.com/ekmas/neobrutalism-componentsA collection of composable, themeable, and customizable UI components styled with the neobrutalism aesthetic and built upon the shadcn/ui foundation. Includes components such as Accordion, Alert Dialog, Avatar, Badge, Breadcrumb, and advanced chart and data table implementations using Recharts and TanStack Table. Note: This project is no longer maintained.
neobrutalism-components project is no longer being maintained. For more information regarding the project status, refer to the official discussion: https://github.com/ekmas/neobrutalism-components/discussions/100Textarea component, you must add the component file to your local project structure. Copy the contents of src/components/ui/textarea.tsx into your project's component directory (e.g., @/components/ui/textarea.tsx).@/components/ui/alert-dialog.tsx.Combobox component is a composition of the <Popover /> and <Command /> components. To use it, you must first ensure that both the Popover and Command components are installed and configured in your project according to their respective installation guides.@/components/ui/pagination.tsx into your project's component directory.@/components/ui/progress.tsx into your project's component directory.```tsx file=<rootDir>/src/components/ui/progress.tsxTo achieve the Neobrutalism aesthetic, the following Google Fonts are recommended for use in your layouts:
ImageCard component, copy the source code from <rootDir>/src/components/ui/image-card.tsx into your project's component directory.```tsx file=<rootDir>/src/components/ui/image-card.tsx@/components/ui/marquee.tsx into your project's component directory.```tsx file=<rootDir>/src/components/ui/marquee.tsx@/components/ui/dialog.tsx.<rootDir>/src/components/ui/scroll-area.tsx into your local @/components/ui/scroll-area path.The Resizable component allows you to create accessible panel groups with keyboard support. It consists of three main parts:
ResizablePanelGroup: The container for the panels. Use the direction prop to specify if the layout is horizontal or vertical.ResizablePanel: An individual panel within the group. Use the defaultSize prop (percentage) to set its initial width or height.ResizableHandle: The interactive element between panels that allows users to resize them.Import these components from your local UI directory.
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from '@/components/ui/resizable'
export default function ResizableExample() {
return (
<ResizablePanelGroup
direction="horizontal"
className="rounded-base max-w-md border-2 border-border text-main-foreground shadow-shadow"
>
<ResizablePanel defaultSize={50}>
<div className="flex h-[200px] items-center justify-center bg-main p-6">
<span className="font-base">One</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={50}>
<ResizablePanelGroup direction="vertical">
<ResizablePanel defaultSize={25}>
<div className="flex h-full items-center justify-center bg-main p-6">
<span className="font-base">Two</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={75}>
<div className="flex h-full items-center justify-center bg-main p-6">
<span className="font-base">Three</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
)
}