Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@5rahim
5rahim committed Jan 17, 2024
1 parent 3bd07c9 commit ad8ea5f
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 28 deletions.
45 changes: 26 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,50 @@

## Why?

Chalk components are mainly built around Radix UI primitives with an additional layer of abstraction to make them easier to use and provide
more functionality out of the box.
Additionally, Chalk provides a broader range of components tailored for SaaS applications while
keeping a consistent design language and API.
Chalk UI is a collection of React components built for SaaS applications.
It was created to merge the best parts of multiple UI libraries into a single package.
It combines the developer experience of shadcn/ui, primitives of Radix UI, higher order components of Saas UI, charts of Tremor, and more.

Chalk UI components are opinionated, meaning most components are built with a specific use case in mind.
However, they are also flexible enough to be customized to suit your needs.

Most components are built around primitives from multiple libraries, such as Radix UI, Zag.js, Recharts, and more.
Chalk UI adds a layer of abstraction to provide a consistent design language and API.

## Features

- Stable foundation around Radix UI
- Broad range of components tailored for SaaS applications
- Higher-level API for Radix UI primitives
- Consistent design language and API
- Usage of battle-tested libraries
- Customizable with TailwindCSS
- 100% TypeScript

| Features | Chalk UI | Shadcn UI | Radix UI |
|:---------------------------------------------------------------|:---------|:----------|:---------|
| Tailwind support | ✅ | ✅ | ✅ |
| Pre-styled components | ✅ | ✅ | ✅ |
| Vanilla JS option | ❌ | ✅ | ✅ |
| CLI | ✅ | ✅ | ❌ |
| Higher-level API | ✅ | ❌ | - |
| Charts, CurrencyInput, PhoneInput, AddressInput,<br/> Dropzone | ✅ | ❌ | ❌ |
| Fully-featured Form API | ✅ | ❌ | ❌ |
| Fully-featured DataGrid | ✅ | ❌ | ❌ |
| Customizable | ✅ | ✅ | ✅ |
| Opinionated | Yes | No | No |
| Components | 52 | 46 | 28 |
| Features | Chalk UI | Shadcn UI | Radix UI | Saas UI |
|:------------------------------------------------|:---------|:----------|:---------|:--------|
| Tailwind support | ✅ | ✅ | ✅ | ❌ |
| Pre-styled components | ✅ | ✅ | ✅ | ✅ |
| Customizable | ✅ | ✅ | ✅ | ✅ |
| Vanilla JS option | ⚠️ | ✅ | ✅ | ✅ |
| Higher order components | ✅ | ❌ | ❌ | ✅ |
| Charts, CurrencyInput, PhoneInput, AddressInput | ✅ | ❌ | ❌ | ❌ |
| Fully-featured Form API | ✅ | ❌ | ❌ | ✅ |
| Fully-featured DataGrid | ✅ | ❌ | ❌ | ✅ |
| CLI | ✅ | ✅ | ❌ | ❌ |
| Completely Open Source | Yes | Yes | Yes | No |
| Components | 50+ | 46 | 28 | 60+ |

- ✅ = First-class support with no extra work
- ⚠️ = Requires some extra work
- ❌ = Not officially supported or documented

## Documentation

The documentation is available at [chalk.rahim.app](https://chalk.rahim.app/).

## Credits

This project is inspired by the following projects:
Chalk UI is inspired by the following projects:

- [shadcn/ui](https://ui.shadcn.com/)
- [Tremor](https://tremor.so/)
Expand Down
16 changes: 8 additions & 8 deletions src/app/docs/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,27 @@ import { Button, IconButton } from "@/workshop/button"
import { ScrollArea } from "@/workshop/scroll-area"
import Link from "next/link"
import React from "react"
import { BiHomeAlt, BiLogoGithub, BiStar } from "react-icons/bi"
import { BiHomeAlt, BiLogoGithub, BiSolidStar, BiStar } from "react-icons/bi"

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<AppSidebarProvider>
<AppLayout withSidebar sidebarSize={"md"}>
<AppLayoutSidebar className="mt-16">
<AppSidebar>
<div className="flex flex-col items-center justify-center gap-2 py-4">
{<img src="/images/logo.png" className="size-16 w-auto" />}
<div className="flex flex-col items-center justify-center gap-2 pb-4 lg:py-4">
<img src="/images/logo.png" className="size-16 w-auto" />
<div className="font-bold text-2xl ">Chalk UI</div>
</div>
<ScrollArea className="h-dvh p-4">
<ScrollArea className="h-[calc(100vh-150px)] lg:h-dvh p-4">
<div>
<DocsVerticalMenu />
</div>
</ScrollArea>
</AppSidebar>
</AppLayoutSidebar>
<AppLayout>
<AppLayoutHeader className="fixed top-0 w-full right-0 h-16 border-b flex items-center justify-between px-4 bg-[--background] backdrop-blur z-[50]">
<AppLayoutHeader className="fixed top-0 w-full right-0 h-16 border-b flex items-center justify-between px-4 bg-[--background] backdrop-blur z-[50] max-w-full overflow-x-auto">
<div className="flex items-center gap-2">
<AppSidebarTrigger />
<Link href="/">
Expand All @@ -50,8 +50,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
referrerPolicy="no-referrer"
>
<Button
intent="gray-subtle"
leftIcon={<BiStar />}
intent="gray-basic"
leftIcon={<BiSolidStar className="text-[--yellow]" />}
size="sm"
>5rahim/chalk-ui</Button>
</Link>
Expand All @@ -61,7 +61,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
referrerPolicy="no-referrer"
>
<Button
intent="gray-subtle"
intent="gray-basic"
leftIcon={<BiLogoGithub />}
size="sm"
>rahim.app</Button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/component-preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export function CopyButton({

return (
<IconButton
intent="white-outline"
intent="white-basic"
size="sm"
className={cn(
className,
Expand Down

0 comments on commit ad8ea5f

Please sign in to comment.