RChursin_ brand

fgfont-sansrounded-tilefocus-ringdarkrc-hatchLogoFrameCornersrc-cursorlux-btnlux-cardlux-rulelux-grainusePointerSpotlightuseLuxelux-glassease-luxCountUplux-linkfx-dotsfx-shiny-textButtonIconButtonKbdButtonLinkCopyButtonShimmerButtonFieldTextInputTextareaSelectCheckboxRadioGroupRadioCardsSwitchSegmentedlux-rangePasswordInputOtpInputNumberFieldComboboxFileDropCharacterCountPickerStatusPickerDatePickerRangePickerDateFieldMemorableDateInputTimeSelectCalendarGridMiniCalendarDueChipTimeDisplayStopwatchCountdownQuickCaptureDialogPopoverMenuTooltipToastProviderSpinnerEmptyStateErrorSummaryAnnouncerProviderSquareProgressFinishedBannerAbandonQuestionAutosaveStatusAvatarChipCodeBlockStatusIconVerdictBadgeSampleBadgeKeyTableRulesDoDontWeeklyFocusLapsTableAgendaListEventBlockTabsLinkCommandPaletteSiteHeaderSiteFooterSkipLinkContainerPageIntroSectionSpecimenSeparatorAppWindowTerminalReceiptDashboardMockCutCalculatorRunWallFaqCommandLineSignInFlowAuthLayoutSocialButtonsPasswordStrengthAccountSettingsuseFormContactFormTasksAppTaskGridTaskBoardTaskDetailCreateTaskDialogBulkBarFilterBarTasksTodayWidgetCalendarAppTimeGridMonthViewAgendaWidgetEventDialogTimerAppFocusSessionFocusWidgetTimeLogNotesAppNoteEditorReminderListIconIconGalleryConstructionHomeIconHomeControlRoomHomeOneCommandHomeReceiptHomeFrameDetailsPageOverviewPageTailwindPlusAppShellShadcnAppShellMagicUiAppShellAceternityAppShelluseHotkeysusePersistentStatedtftodayISOhighlightcxuseMediaQueryuseStopwatcharmChimeparseMarkdownpackColumnsuseCopyfgfont-sansrounded-tilefocus-ringdarkrc-hatchLogoFrameCornersrc-cursorlux-btnlux-cardlux-rulelux-grainusePointerSpotlightuseLuxelux-glassease-luxCountUplux-linkfx-dotsfx-shiny-textButtonIconButtonKbdButtonLinkCopyButtonShimmerButtonFieldTextInputTextareaSelectCheckboxRadioGroupRadioCardsSwitchSegmentedlux-rangePasswordInputOtpInputNumberFieldComboboxFileDropCharacterCountPickerStatusPickerDatePickerRangePickerDateFieldMemorableDateInputTimeSelectCalendarGridMiniCalendarDueChipTimeDisplayStopwatchCountdownQuickCaptureDialogPopoverMenuTooltipToastProviderSpinnerEmptyStateErrorSummaryAnnouncerProviderSquareProgressFinishedBannerAbandonQuestionAutosaveStatusAvatarChipCodeBlockStatusIconVerdictBadgeSampleBadgeKeyTableRulesDoDontWeeklyFocusLapsTableAgendaListEventBlockTabsLinkCommandPaletteSiteHeaderSiteFooterSkipLinkContainerPageIntroSectionSpecimenSeparatorAppWindowTerminalReceiptDashboardMockCutCalculatorRunWallFaqCommandLineSignInFlowAuthLayoutSocialButtonsPasswordStrengthAccountSettingsuseFormContactFormTasksAppTaskGridTaskBoardTaskDetailCreateTaskDialogBulkBarFilterBarTasksTodayWidgetCalendarAppTimeGridMonthViewAgendaWidgetEventDialogTimerAppFocusSessionFocusWidgetTimeLogNotesAppNoteEditorReminderListIconIconGalleryConstructionHomeIconHomeControlRoomHomeOneCommandHomeReceiptHomeFrameDetailsPageOverviewPageTailwindPlusAppShellShadcnAppShellMagicUiAppShellAceternityAppShelluseHotkeysusePersistentStatedtftodayISOhighlightcxuseMediaQueryuseStopwatcharmChimeparseMarkdownpackColumnsuseCopyfgfont-sansrounded-tilefocus-ringdarkrc-hatchLogoFrameCornersrc-cursorlux-btnlux-cardlux-rulelux-grainusePointerSpotlightuseLuxelux-glassease-luxCountUplux-linkfx-dotsfx-shiny-textButtonIconButtonKbdButtonLinkCopyButtonShimmerButtonFieldTextInputTextareaSelectCheckboxRadioGroupRadioCardsSwitchSegmentedlux-rangePasswordInputOtpInputNumberFieldComboboxFileDropCharacterCountPickerStatusPickerDatePickerRangePickerDateFieldMemorableDateInputTimeSelectCalendarGridMiniCalendarDueChipTimeDisplayStopwatchCountdownQuickCaptureDialogPopoverMenuTooltipToastProviderSpinnerEmptyStateErrorSummaryAnnouncerProviderSquareProgressFinishedBannerAbandonQuestionAutosaveStatusAvatarChipCodeBlockStatusIconVerdictBadgeSampleBadgeKeyTableRulesDoDontWeeklyFocusLapsTableAgendaListEventBlockTabsLinkCommandPaletteSiteHeaderSiteFooterSkipLinkContainerPageIntroSectionSpecimenSeparatorAppWindowTerminalReceiptDashboardMockCutCalculatorRunWallFaqCommandLineSignInFlowAuthLayoutSocialButtonsPasswordStrengthAccountSettingsuseFormContactFormTasksAppTaskGridTaskBoardTaskDetailCreateTaskDialogBulkBarFilterBarTasksTodayWidgetCalendarAppTimeGridMonthViewAgendaWidgetEventDialogTimerAppFocusSessionFocusWidgetTimeLogNotesAppNoteEditorReminderListIconIconGalleryConstructionHomeIconHomeControlRoomHomeOneCommandHomeReceiptHomeFrameDetailsPageOverviewPageTailwindPlusAppShellShadcnAppShellMagicUiAppShellAceternityAppShelluseHotkeysusePersistentStatedtftodayISOhighlightcxuseMediaQueryuseStopwatcharmChimeparseMarkdownpackColumnsuseCopyfgfont-sansrounded-tilefocus-ringdarkrc-hatchLogoFrameCornersrc-cursorlux-btnlux-cardlux-rulelux-grainusePointerSpotlightuseLuxelux-glassease-luxCountUplux-linkfx-dotsfx-shiny-textButtonIconButtonKbdButtonLinkCopyButtonShimmerButtonFieldTextInputTextareaSelectCheckboxRadioGroupRadioCardsSwitchSegmentedlux-rangePasswordInputOtpInputNumberFieldComboboxFileDropCharacterCountPickerStatusPickerDatePickerRangePickerDateFieldMemorableDateInputTimeSelectCalendarGridMiniCalendarDueChipTimeDisplayStopwatchCountdownQuickCaptureDialogPopoverMenuTooltipToastProviderSpinnerEmptyStateErrorSummaryAnnouncerProviderSquareProgressFinishedBannerAbandonQuestionAutosaveStatusAvatarChipCodeBlockStatusIconVerdictBadgeSampleBadgeKeyTableRulesDoDontWeeklyFocusLapsTableAgendaListEventBlockTabsLinkCommandPaletteSiteHeaderSiteFooterSkipLinkContainerPageIntroSectionSpecimenSeparatorAppWindowTerminalReceiptDashboardMockCutCalculatorRunWallFaqCommandLineSignInFlowAuthLayoutSocialButtonsPasswordStrengthAccountSettingsuseFormContactFormTasksAppTaskGridTaskBoardTaskDetailCreateTaskDialogBulkBarFilterBarTasksTodayWidgetCalendarAppTimeGridMonthViewAgendaWidgetEventDialogTimerAppFocusSessionFocusWidgetTimeLogNotesAppNoteEditorReminderListIconIconGalleryConstructionHomeIconHomeControlRoomHomeOneCommandHomeReceiptHomeFrameDetailsPageOverviewPageTailwindPlusAppShellShadcnAppShellMagicUiAppShellAceternityAppShelluseHotkeysusePersistentStatedtftodayISOhighlightcxuseMediaQueryuseStopwatcharmChimeparseMarkdownpackColumnsuseCopy

RChursin_ · Brand

The brand, built from its own parts.

A black-and-white component library for React 19, TypeScript and Tailwind CSS v4. Each part has a live example, its real source, props, keyboard and accessibility notes; copy it into your project and import it the way this site does.

Start with the foundations Set up

Parts: 155
Categories: 17
Examples: 356
Icons: 161

Sorted

Every category, grouped by what a part is for.

The ground first, then the single parts, the larger pieces made of them, and the resources around them.

Start

The ground everything stands on: tokens, the logo, the finishing layer.

Components

Single parts you compose.

Patterns

Larger pieces made of components: page sections, auth flows, whole tools.

Resources

The icon set, complete page templates, hooks and utilities.

Tools

One screen, every tool.

Tasks, a calendar, a focus timer and notes with reminders, on one board. They share their data with the full tools: tick a task here and it is done on the Tasks app too.

Open the tools

The mark

Two shapes and a cursor.

A frame and a square, then the name in Geist Mono. One colour at a time, and the underscore blinks only in product moments.

LockupThe default: mark and name side by side. Headers, footers, documents. At least 110 px wide.

WordmarkThe name alone, where the mark is already on the page: the hero, the footer signature.

StackedMark above the name, for square spaces: covers, cards, splash screens.

MarkThe frame alone: app icons, favicons, avatars. At least 16 px.

See the logo rules

Set up

Four steps, and every part imports the way it does here.

1.Copy the library’s folders brand, components, home, product, screens and details and the four stylesheets into your project as src/kit/. This site keeps them there and refreshes them with kit.ts sync.
2.Add one alias in tsconfig.json. Next and Turbopack read it, so there is no bundler config.
tsconfig.json
```
{  "compilerOptions": {    "paths": {      "@rchursin/*": ["./src/kit/*"]    }  }}
```

3.Import the styles once, in src/app/globals.css.

src/app/globals.css

@import "../styles/brand.css";@import "../styles/effects.css";@import "../styles/luxe.css";@import "../styles/product.css";

4.Wrap the app once in AnnouncerProvider and ToastProvider (this site does it in BrandShell) and put the class dark on <html> for dark mode. Every part works in both themes.

Take it into code.

React 19, TypeScript and Tailwind CSS v4, with no other dependencies. Copy a folder, import a part, and the site and the app read as one object.

GitHub Start with the foundations